Vue 封装axios(四种请求)及相关介绍(十三)

2020 年 6 月 29 日
筆記
VUE, Vue知识架构

Vue 封装axios(四种请求)及相关介绍

首先axios是基于promise的http库

promise是什么？
1、主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3、可以在对象之间传递和操作promise，帮助我们处理队列

一.首先安装axios

npm install axios; // 安装axios

二.引入axios

我是根据网上学习的，在目录下新建一个文件夹，新建两个文件 http.js 和 api.js
为什么要新建这两个文件， 我们在请求的时候，肯定要写接口地址和参数吧，所以我们用http.js 写四个请求方式，在api.js 里面去调用，然后把所有的接口地址写在api.js 里面，这样可以集中修改接口地址，方便管理。
请求是请求
地址是地址

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到
// Antdesign的全局提示插件
import { message } from "ant-design-vue";

配置 axios的操作及四种请求

// 在http.js中引入axios
import { message } from "ant-design-vue"; // 引入axios
import axios from "axios";
import router from "@/router";

// 设置超时时间
axios.defaults.timeout = 10000;
// 设置默认post的请求头
axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";

// 添加token 在登录成功后进行设置
export function setToken(token) {
  axios.defaults.headers.common["Authorization"] = "Bearer " + token;
}

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params) {
  console.log(url, params);
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params,
      })
      .then(res => checkLogin(res))
      .then(res => {
        resolve(res);
      })
      .catch(err => {
        reject(err);
      });
  });
}

/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post(url, params, contentType) {
  // console.log(contentType ? contentType: 'application/json')
  console.log(url, params);
  return new Promise((resolve, reject) => {
    axios
      .post(url, params, {
        headers: {
          "Content-Type": contentType ? contentType : "application/json",
        },
      })
      .then(res => checkLogin(res))
      .then(res => {
        if (res.data.code == 0) {
          resolve(res);
        } else {
          console.log(res);
          message.error(res.data.msg);
        }
      })
      .catch(err => {
        reject(err);
      });
  });
}

/**
 * put方法，对应put请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function put(url, params) {
  return new Promise((resolve, reject) => {
    axios
      .put(url, params)
      .then(res => checkLogin(res))
      .then(res => {
        resolve(res);
        // Loading.service(true).close();
        //  Message({message: '请求成功', type: 'success'});
      })
      .catch(err => {
        reject(err);
        // Loading.service(true).close();
        // Message({message: '加载失败', type: 'error'});

        message.error("加载失败");
      });
  });
}

/**
 * delete
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function deletedata(url, params) {
  return new Promise((resolve, reject) => {
    axios
      .delete(url, params)
      .then(res => checkLogin(res))
      .then(res => {
        resolve(res);
        // Loading.service(true).close();
        //  Message({message: '请求成功', type: 'success'});
      })
      .catch(err => {
        reject(err);
        // Loading.service(true).close();
        // Message({message: '加载失败', type: 'error'});
        message.error("加载失败");
      });
  });
}

function checkLogin(res) {
  // console.log(res)
  // res = JSON.parse(res)
  console.log(res.data);
  if (res.data.code === 401) {
    message.error(res.data.msg);
    router.push({
      //核心语句
      path: "/login", //跳转的路径
    });
    return false;
  } else if (res.data.code === 403) {
    message.error("权限不足");
    return false;
  } else if (res.data.code === 500) {
    message.error("服务器内部错误");
    return false;
  } else {
    return res;
  }
}

// function parseJSON(response) {
//   return response.json();
// }

这个地方按理说是写一个拦截器（axios是有直接拦截请求之前响应拦截）但是没有来急就写了 checkLogin 直接方法判断有时间我回来改

注意

这个里面的post请求做了修改就是请求的时候响应头可能不一样所以我们直接进行判断要是没有使用默认，有的话用传进来的

三.接口管理

/**
 * api接口统一管理
 */
// eslint-disable-next-line no-unused-vars
import QS from "qs";
//引入进来四种方式
import {get, post, deletedata, put} from "./http";
//这是和代理相对应的头
var baseURL = "engine/";

//举例子：
//这是post的,需要进行序列化的
export const login = data => post(baseURL + "login/account", QS.stringify(data), "application/x-www-form-urlencoded");
//post直接用的
export const projectlist = data => get(baseURL + "projects/page", data);
//等等 反正就是这个意思  名字自己起就行  data是来的参数
//QS.stringify(data) 序列化参数 放到url使用
//"application/x-www-form-urlencoded" 这是传的响应头的  上面的注意 里面说了 post方法进行了处理

四.页面进行请求

//直接进行引入api.js里面的方法 传参数 接受回调
//举例子
import {login } from "../../../Api/api"; // 导入我们的api接口
 getPeople(
 {
	name:"小坦克",
	password:"3485"
 }
 ).then(res => {
     console.log(res)
 });
//其他的跟这个一个意思

五.设置代理

在 vue.config.js 文件里面进行设置注意proxy里面的别写错了和请求的对应起来

    devServer: {
        //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
        proxy: {
            '/engine': {
                // //192.168.0.19:8082/engine
                target: '//192.168.0.19:8082/engine',//代理地址，这里设置的地址会代替axios中设置的baseURL

                changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
                //ws: true, // proxy websockets
                //pathRewrite方法重写url
                pathRewrite: {
                    '^/engine': '/'
                    //pathRewrite: {'^/api': '/'} 重写之后url为 //192.168.1.16:8085/xxxx
                    //pathRewrite: {'^/api': '/api'} 重写之后url为 //192.168.1.16:8085/api/xxxx
                }
            }
        }
    }

为什么设置代理就是让所有的请求都走这个代理，你也可以设置多个代理保证名字别写错就行，也可以不设置代理，直接写url请求也行，总之不是大问题
看看这个，讲代理的意思的
代理的那些事

六.说一下请求头

大体用三种：
application/x-www-form-urlencoded
multipart/form-data
application/json
http协议是建立在tcp/ip协议之上的应用层协议，主要包括三个部分，状态行，头部信息，消息主体。对应一个http请求就是：请求行，请求头，请求体。
这个讲的很细有时间抄过来
//blog.csdn.net/u014209205/article/details/81147783

总结：具体使用就是三个部分请求方法(http.js) 请求地址(api.js) 进行请求传参得到回调(页面调用)

参考别人写的好的
vue中Axios的封装和API接口的管理//juejin.im/post/5b55c118f265da0f6f1aa354
Axios的封装
 几种响应头//blog.csdn.net/u014209205/article/details/81147783
代理的那些事//www.jianshu.com/p/3de259ecc76e
Vue中axios拦截器，传token给后端//www.jianshu.com/p/2035b1e923b2
promise是什么//www.jianshu.com/p/1b63a13c2701

Tags: VUE Vue知识架构