快来升级你项目内的axios封装,向重复请求say goodbye

·  阅读 17709
快来升级你项目内的axios封装,向重复请求say goodbye

开箱即用的axios Api请求封装

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

产生的原因有多种:

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

  • 相同信息同页面的异构展示,每个地方独立获取数据(不够优雅的架构等);

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

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

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

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

image.png

目录结构如图。

封装工具函数: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});
    },
}
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改