开箱即用的axios Api请求封装

之前做项目的时候经常遇到个问题：相同url相同参数的接口，短时间内重复请求调用。

产生的原因有多种：

• 按钮未做防抖/节流/锁,高频点击（实际上项目中所有按钮都加上防抖/节流/锁处理是不现实的）；

• 相同信息同页面的异构展示，每个地方独立获取数据（不够优雅的架构等）；

• 代码没优化好，但是历史代码逻辑复杂，不敢重构......

最开始想要做的优化方案是：对每一个请求做记录（通过url和param），请求发起前检测是否存在已发出的接口，如果有则打断。但是有一个问题，被打断的接口没有返回，不符合一些特殊的业务场景。

于是在原有的axios封装上不断优化，历时两天，终于撸出最终版：

• 开箱即用
• 可拦截重复请求（拦截后面的），并将请求结果共享给所有请求源
• 支持get/post等多种请求方式，支持文件上传，支持自定义headers
• 可自定义是否允许重复请求
• 可基于此代码，二开支持请求日志

目录结构如图。

封装工具函数：requestMeans.js

import { getToken } from '@/storage';

let pending = []; //用于存储每个ajax请求的取消函数和ajax标识
let task = {}; //用于存储每个ajax请求的处理函数，通过请求结果调用，以ajax标识为key

//请求开始前推入pending
export const pushPending = (item) => {
	pending.push(item);
};
//请求完成后取消该请求，从列表删除
export const removePending = (key) => {
    for (let p in pending) {
        if (pending[p].key === key) {
            //当前请求在列表中存在时
            pending[p].cancelToken(); //执行取消操作
            pending.splice(p, 1); //把这条记录从列表中移除
        }
    }
};
//请求前判断是否已存在该请求
export const existInPending = (key) => {
    return pending.some((e) => e.key === key);
};

// 创建task
export const createTask = (key, resolve) => {
    let callback = (response) => {
        if (response.data.status === -1) {
            // 这里处理授权逻辑
        } else if (response.data.status) {
            // 这里做全局错误提示
        }
        resolve(response.data);
    };
    if (!task[key]) task[key] = [];
    task[key].push(callback);
};
// 处理task
export const handleTask = (key, response) => {
    for (let i = 0; task[key] && i < task[key].length; i++) {
        task[key][i](response);
    }
    task[key] = undefined;
};

// data处理：存在token则加入
export const dataAddToken = (data) => {
	const token = getToken();
	if (token) {
		data["token"] = token;
	}
	return data;
};

请求封装：request.js

import qs from 'qs'; //参数编译
import axios from 'axios';

import { pushPending, removePending, existInPending, createTask, handleTask, dataAddToken } from './requestMeans';

const getHeaders = { 'Content-Type': 'application/json' };
const postHeaders = { 'Content-Type': 'application/x-www-form-urlencoded' };
const fileHeaders = { 'Content-Type': 'multipart/form-data' };

const baseURL = process.env.apiUrl;

//请求封装
export const request = (method, url, params, headers, preventRepeat = true, uploadFile = false) => {
    let key = baseURL + url + '?' + qs.stringify(params);
    return new Promise((resolve, reject) => {
        const instance = axios.create({
            baseURL: baseURL + url,
            headers,
            timeout: 30 * 1000,
        });

        instance.interceptors.request.use(
            (config) => {
                if (preventRepeat) {
                    config.cancelToken = new axios.CancelToken((cancelToken) => {
                        // 判断是否存在请求中的当前请求 如果有取消当前请求
                        if (existInPending(key)) {
                            cancelToken();
                        } else {
                            pushPending({ key, cancelToken });
                        }
                    });
                }
                return config;
            },
            (err) => {
                    return Promise.reject(err);
            }
        );

        instance.interceptors.response.use(
            (response) => {
                if (preventRepeat) {
                    removePending(key);
                }
                return response;
            },
            (error) => {
                return Promise.reject(error);
            }
        );

        // 请求执行前加入task
        createTask(key, resolve);

        instance(Object.assign({}, { method }, method === 'post' || method === 'put' ? { data: !uploadFile ? qs.stringify(params) : params } : { params }))
            .then((response) => {
                // 处理task
                handleTask(key, response);
            })
            .catch(() => {});
    });
};

// 定义对外Get、Post请求
export default {
    // 单独导出 用于put等非常规请求及需要特殊处理header的请求
    request,
    get(url, data = {}, preventRepeat = true) {
        data = dataAddToken(data);
        return request('get', url, data, getHeaders, preventRepeat, false);
    },
    post(url, data = {}, preventRepeat = true) {
        data = dataAddToken(data);
        return request('post', url, data, postHeaders, preventRepeat, false);
    },
    file(url, data = {}, preventRepeat = true) {
        return request('post', url, data, fileHeaders, preventRepeat, true);
    },
};

api封装：index.js

import Request from './request';
 
// 公用-获取验证码
export const postMerchantLoginCms = (data) => Request.post('/merchant/login/cms', data);
 
// 临时mock接口，用于测试封装功能
// export const getList = (data) => Request.get('/web-model-library/merchant/investigation', data);
export const getList = (data) => Request.post('/active/getRandModel', data);

使用方式：

import { getList } from "@/api";

methods: {
    async getdata() {
        let data =await getList({a:1});
    },
}