axios 网络封装

 统一的请求数据处理工具

网络请求有很多，但终归是发送和接收，并且axios发送的数据不能是对象，只能是字符串的形式，所以可以使用统一的工具类对axios发送请求的数据进行处理；以此类推，接收返回的请求，可以通过判断不同的状态码，进行不同的处理（500服务器内部错误、404访问地址不存在等）

新建js文件，作为工具，可以放在自建的utils文件夹下
// this.$axios({})
import axios from "axios"
import qs 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({
    //网络请求时间：5秒  超过5秒则请求失败
    timeout: 5000
    //网路请求公共配置
})

//添加一个请求拦截器
axios.interceptors.request.use(config => {
    //在请求之前做一些事
    //发送post请求数据的统一处理
    if (config.methods === "post") {
        config.data = qs.stringify(config.data);
    }
    return config;
}, err => {
    //请求错误的时候做一些事
    return Promise.reject(error);
});

//添加一个响应拦截器
axios.interceptors.response.use(response => {
    //对返回的数据做一些处理
    return response.status === 200 ? Promise.resolve(response) : Promise.reject(response);
}, error => {
    //对返回的错误做一些处理
    const { response } = error;
    errorHandle(response.status,response.info);
    // return Promise.reject(error);

});
export default instance;

重点

 

其他的配置可参考：参考文档

配置请求使用路径

新建如下： index里封装所有的网络请求        path里放所有的路径

 测试显示