axios 封

import axios from 'axios';
const instance = axios.create({
	baseURL: 'https://some-domain.com/api/',
	// timeout: 1000,
});
// 请求处理
instance.interceptors.request.use(
	requestConfig => {
		return {
			...requestConfig,
			params: {
				...requestConfig.params,
				debug: process.env.NODE_ENV === "production" ? undefined : 1
			}
		};
	},
	error => Promise.reject(error)
);
// 返回处理
instance.interceptors.response.use(
	response => {
		return response;
	},
	error => {
		Promise.reject(error);
	}
);
export default instance;

减少重复请求

import axios from "axios";
import qs from 'qs'

// 用于存储pending的请求(处理多条相同请求)
const pendingRequest = new Map()

// 生成request的唯一key
const generateRequestKey = (config:any = {}) => {
  // 通过url,method,params,data生成唯一key,用于判断是否重复请求
  // params为get请求参数,data为post请求参数
  const { url, method, params, data } = config
  return [url, method, qs.stringify(params), qs.stringify(data)].join('&')
}

// 将重复请求添加到pendingRequest中
const addPendingRequest = (config:any) => {
  const key = generateRequestKey(config)
  if (!pendingRequest.has(key)) {
    config.cancelToken = new axios.CancelToken(cancel => {
      pendingRequest.set(key, cancel)
    })
  }
}

// 取消重复请求
const removePendingRequest = (config:any) => {
  const key = generateRequestKey(config)
  if (pendingRequest.has(key)) {
    const cancelToken = pendingRequest.get(key)
    cancelToken(key) // 取消之前发送的请求
    pendingRequest.delete(key)// 请求对象中删除requestKey
  }
}

const instance = axios.create({
  baseURL,
  timeout: 1000 * 30,
  headers: {
    // '	Cache-Control': 'max-age=0',
    'Authorization': token,
    'x-auth-token': token
  }
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 处理重复请求
    removePendingRequest(config)
    addPendingRequest(config)

    return config
  },
  error => {
    // 处理请求错误
    return Promise.reject(error)
  }
)

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 移除重复请求
    removePendingRequest(response.config)
    
    return response 
  },
  error => {
    // 异常情况console,方便排查问题
    console.log('error', error)
    // 移除重复请求
    removePendingRequest(error.config || {})
    
    return Promise.reject(error)
  }
)
export default instance;

axios 封
https://blog.fullsize.cn/2021/11/23/notion/axios-feng/
作者
fullsize
发布于
2021年11月23日
许可协议