Axios拦截器、取消请求

第一步：引入 axios

1、安装 -> npm install axios -S
2、引用 -> main.js -> import axios form "axios"

第二步：封装 axios 实例 - request.js

1、创建 -> 在 src 目录下 创建 utils 文件夹
2、新建 -> 在已创建好的 utils 文件夹中 新建 request.js， 此文件主要写 axios 请求拦截配置

import axios from "axios"; // 导入 axios
import { Message } from "element-ui"; // 使用 elementUI Message 做消息提醒

// 创建 axios 实例
const service = axios.create({
    baseURL: process.env.BASE_API, // 公共接口
    withCredentials: true, // 跨域请求时发送Cookie
    timeout: 5000 // 请求超时时间
});

service.interceptors.request.use(
    config => {
        config.headers["Content-type"] = "application/json;charset=UTF-8";
        return config;
    },
    error => {
        Promise.reject(error);
    }
);

service.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error && error.response) {
            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}`;
            }
        } else {
            if (JSON.stringify(error).includes("timeout")) {
                Message.error("服务器响应超时，请刷新当前页面。");
            }
            Message.error("连接服务器失败");
        }

        Message.error(error.message);

        return Promise.resolve(error.response);
    }
);

export default service;

第三步：封装 http 请求（get、post、put、delete）- httpRequest.js

1、新建 -> 在已创建好的 utils 文件夹中 新建 httpRequest.js 此文件主要写以上几种请求的封装过程

import request from "./request"; // 引入封装好的 axios 实例

const httpRequest = {
    /**
     * methods: 请求
     * @param url 请求地址
     * @param params 请求参数
     */
    get(url, params) {
        const config = { method: "get", url: url };

        if (params) config.params = params;

        return request(config);
    },

    post(url, params) {
        const config = { method: "post", url: url };

        if (params) config.data = params;

        return request(config);
    },

    put(url, params) {
        const config = { method: "put", url: url };

        if (params) config.data = params;

        return request(config);
    },

    delete(url, params) {
        const config = { method: "delete", url: url };

        if (params) config.params = params;

        return request(config);
    }
};

export default httpRequest;

第四步：封装 api，用于发送请求 - interface.js

1、创建 -> 在 src 目录下 创建 interfaceAPI 文件夹
2、新建 -> 在已创建好的 interfaceAPI 文件夹中 新建 interface.js， 此文件主要写 api 发送请求过程

写法一：适合按需导出引用

import httpRequest from "../utils/httpRequest";

export function getBannerList(params) {
    return httpRequest.get('financing/financity/listMoreOperate', params);
}

export function getDicList(params, pageSize, pageIndex) {
    return httpRequest.get('portal/newproduct/findProduct/' + pageIndex + '/' + pageSize, params);
}

写法二：用于把接口全部导出

import httpRequest from "../utils/httpRequest";

export default {
    getBannerList(params) {
        return httpRequest.get('financing/financity/listMoreOperate', params);
    },
    getDicList(params, pageSize, pageIndex) {
        return httpRequest.post('portal/newproduct/findProduct/' + pageSize + '/' + pageIndex, params);
    }
}
}

第五步：页面引用 - index.vue

写法一：适合按需导出引用

<script>
    import { getBannerList } from "../interfaceAPI/interface";
    export default {
        name: "index",
        data() {
            return {
                
            }
        },
        created() {
            this.getBannerList()
        },
        methods: {
            getBannerList() {
                getBannerList().then(res => console.log(res)).catch(err => console.log(err))
            }
        }
    };
</script>

写法二：用于把接口全部导出

<script>
    import interfaceAPI from "../interfaceAPI/interface";
    export default {
        name: "index",
        data() {
            return {
                
            }
        },
        created() {
            this.getBannerList()
        },
        methods: {
            getBannerList() {
                interfaceAPI.getBannerList().then((response) => {
                    console.log(response);
                }).catch((error) => {
                    console.log(error)
                });
            }
        }
    };
</script>

以上就详细介绍了，在 vue-cil 项目中 如何封装 axios，封装请求，封装公共的 api，配置多个接口，页面如何调用请求等问题，都是亲测有用。

另外，在配置请求的过程中，可能会遇到 axios 的 get 请求 添加 Contnt-type 请求头失效，请移步至vue-axios 请求拦截器 Get 请求之添加请求头 Content-Type 无效