axios实现并发控制和重试机制

文档

• 原文: 如何使用 axios 实现前端并发限制和重试机制

import axios from 'axios';
const request: AxiosInstance = axios.create({
  timeout: 1000 * 10 * 3,
  baseURL: '/api',
  withCredentials: true,
});
const default_retryTimes = 2;
const default_retryDelay = 1000 * 3;
const MAX_COUNT = 5;
const requestQueue = [];
let activeCount = 0;

// 并发限制 + 请求重试
function processQueue() {
  if (activeCount < MAX_COUNT && requestQueue.length) {
    const { config, retryTimes, retryDelay, resolve, reject } = requestQueue.shift();
    activeCount++;
    request(config)
      .then(response => {
        resolve(response);
      })
      .catch(error => {
        if (retryTimes === 0) {
          reject(error);
        } else {
          setTimeout(() => {
            requestQueue.push({ config, retryTimes: retryTimes - 1, retryDelay, resolve, reject });
          }, retryDelay);
        }
      })
      .finally(() => {
        activeCount--;
        processQueue();
      });
  }
}

function requestHandler(config, retryTimes = default_retryTimes, retryDelay = default_retryDelay) {
  return new Promise((resolve, reject) => {
    requestQueue.push({ config, retryTimes, retryDelay, resolve, reject });
    processQueue();
  });
}

request.get = (url, config) => {
  return requestHandler({ url, method: 'get', ...config });
};

request.post = (url, data, config) => {
  return requestHandler({ url, method: 'post', data, ...config });
};

export { request };

参考

• 如何使用 axios 实现前端并发限制和重试机制