VUE之axios的封装

先安装axios和querystring，安装命令：

npm install --save axios

npm install --save querystring

完成后再src目录下新建文件夹utils，然后在该文件夹下新建文件request.js做为封装代码文件，内容代码如下：

import axios from "axios";
import querystring from "querystring";

const errorHandle = (status, info) => {
    switch (status) {
        case 400:
            console.log("语义有误"); break;
        case 401:
            console.log("服务器认证失败"); break;
        case 403:
            console.log("服务器拒绝访问"); break;
        case 404:
            console.log("地址错误"); break;
        case 500:
            console.log("服务器遇到意外"); break;
        case 502:
            console.log("服务器无响应"); break;
        default:
            console.log(info); break;
    }
}

const instance = axios.create({
    //网络请求的公共配置
    timeout: 5000
})

//最常用拦截器2个：

//1、发送数据之前
instance.interceptors.request.use(
    config => {
        if (config.method === "post") {
            config.data = querystring.stringify(config.data);
        }
        //config:包含着网络请求的所有信息
        return config;
    },
    error => {
        return Promise.reject(error);
    }
)

//2、获取数据之前
instance.interceptors.response.use(
    response => {
        return response.status === 200 ? Promise.resolve(response) : Promise.reject(response);
    },
    error => {
        const { response } = error;
        errorHandle(response.status, response.info);
    }
)

export default instance;

调用方法，在需要调用的组件中引入文件request.js，代码如下：

import axios from "../utils/request";
export default {
  data(){
    return {
      axiosRes:''
    }
  },
  mounted() {
    axios.get('http://www.xxx.com/api/xxx.php').then(res => {
      console.log(res.data);
      this.axiosRes = res.data;
    })
  }
}