三、封装axios---属于自己的axios封装习惯

接下来就是看框架里的请求方式是怎样的，框架里一共有两种axios封装，第一种是没有传参没有加密的，第二种是加密的，第一种可能是方便本地测试的，等到上线时再用第二种（不过当时刚开始做的时候没有发现，自己还专门重新写一遍，）

封装属于自己的axios，先要想好自己想要什么样的，比如像我看了框架里的请求方式就挺不错了，也一直在看他们是怎么封装的。

引入axios，创建axios实例

/****   axios.js   ****/
// 导入axios
import axios from 'axios'
// 使用element-ui Loading做loading动画。
import { Loading } from 'element-ui';

创建axios实例
const myAxios = axios.create({
    // axios 的 url 的基础路径
    baseURL: '/api',
    // 用于请求超时的时间，超过timeout的时间后，会直接报错
    timeout: 30 * 100
});

// axios 请求拦截器
myAxios.interceptors.request.use(config => {
    // 拦截成功时执行该方法
    // 也可以在此处给请求头添加 token 和添加laoding动画
    return config;
}, err => {
    // 拦截失败时执行该方法
    return Promise.reject(err);
});
// axios 响应拦截器
service.interceptors.response.use(response => {
    //接收到响应数据并成功后的一些共有的处理，关闭loading等
    return response
}, error => {
    /***** 接收到异常响应的处理开始 *****/
    if (error && error.response) {
        // 1.公共错误处理
        // 2.根据响应码具体处理
        switch (error.response.status) {
            case 400:
                error.message = '错误请求'
                break;
            case 401:
                error.message = '未授权，请重新登录'
                break;
            case 403:
                error.message = '拒绝访问'
                break;
            case 404:
                error.message = '请求错误,未找到该资源'
                window.location.href = "/NotFound"
                break;
            case 405:
                error.message = '请求方法未允许'
                break;
            case 408:
                error.message = '请求超时'
                break;
            case 500:
                error.message = '服务器端出错'
                break;
            case 501:
                error.message = '网络未实现'
                break;
            case 502:
                error.message = '网络错误'
                break;
            case 503:
                error.message = '服务不可用'
                break;
            case 504:
                error.message = '网络超时'
                break;
            case 505:
                error.message = 'http版本不支持该请求'
                break;
            default:
                error.message = `连接错误${error.response.status}`
        }
    } else {
        // 超时处理
        if (JSON.stringify(error).includes('timeout')) {
            Message.error('服务器响应超时，请刷新当前页')
        }
        error.message = '连接服务器失败'
    }

    Message.error(error.message)
    /***** 处理结束 *****/
    //如果不需要错误处理，以上的处理过程都可省略
    return Promise.resolve(error.response)
})

//不同的请求方法
const http = {
/**
 * methods: 请求
 * @param url 请求地址
 * @param params 请求参数
 */
    get(url, params) {
        const config = {
            method: "get",
            url: url,
            // responseType: 'blob',
        };
        if (params) config.params = params;
        return service(config);
    },
    post(url, params) {
        const config = {
            method: "post",
            url: url,
        };
        if (params) config.data = params;
        return service(config);
    },
    put(url, params) {
        const config = {
            method: "put",
            url: url,
        };
        if (params) config.params = params;
        return service(config);
    },
    delete(url, params) {
        const config = {
            method: "delete",
            url: url,
        };
        if (params) config.params = params;
        return service(config);
    },
    // 下载
    export(url, params) {
        const config = {
            method: "post",
            url: url,
            responseType: "blob",
        };
        if (params) config.data = params;
        return service(config);
    },
};

export default http;

比较简陋，还不是我想要的效果，我想要的效果是：

有些代码不合适放在网站，所以可能会看不太懂 类似这种，但是我还看不太懂具体封装的方法，所以就先用这样。