js实现axios限制请求队列

要实现 axios 的请求队列限制，一般需要使用队列或者 Promise.all 的方式来统一管理请求。以下是实现过程的详细攻略。

1. 队列方式实现axios请求队列限制

使用队列来实现 axios 请求队列限制有以下几个步骤：

1. 定义一个队列，用来存储请求。

   const requestQueue = [];

2. 定义一个函数，用来从队列中取出一个请求，并发送该请求。

   function sendRequest() {
if (requestQueue.length > 0) {
const { url, options, resolve, reject } = requestQueue.shift();
axios.request({
url,
...options,
})
.then(resp => {
resolve(resp);
sendRequest();
})
.catch(error => {
reject(error);
sendRequest();
});
}
}

3. 修改 axios 的 defaults 属性，添加一个请求拦截器，将请求加入队列。

   axios.interceptors.request.use(config => {
return new Promise((resolve, reject) => {
requestQueue.push({
url: config.url,
options: config,
resolve,
reject,
});
sendRequest();
});
});

通过以上步骤，即可实现 axios 请求队列限制。

2. Promise.all方式实现axios请求队列限制

使用 Promise.all 来实现 axios 请求队列限制有以下几个步骤：

1. 定义一个变量，存储正在进行的请求个数。初始值为 0。

   let pendingRequestCount = 0;

2. 定义一个函数，用来发送请求，并返回 Promise 对象。在发送之前，先将正在进行的请求个数加 1，发送之后，将正在进行的请求个数减 1。

   function myRequest(config) {
pendingRequestCount++;
return axios.request(config).finally(() => {
pendingRequestCount--;
})
}

3. 修改 axios 的 defaults 属性，添加一个请求拦截器，如果正在进行的请求个数达到限制，就返回一个被拒绝的 Promise 对象。

   axios.interceptors.request.use(config => {
if (pendingRequestCount >= 5) {
return Promise.reject(new Error('too many requests'));
}
return config;
});

通过以上步骤，即可实现 axios 请求队列限制。

示例说明

示例一

假设有一个页面需要进行多次请求，在请求过程中需要限制请求队列，避免一次性发起过多请求。

在这种情况下，可以使用 Promise.all 方式实现 axios 请求队列限制：

// 发送请求
function sendRequest() {
  const urls = [
    '/api/1',
    '/api/2',
    '/api/3',
    '/api/4',
    '/api/5',
    '/api/6',
    '/api/7',
    '/api/8',
    '/api/9',
    '/api/10',
    '/api/11',
    '/api/12',
  ];
  const requests = urls.map((url) => myRequest({
    url,
  }));
  Promise.all(requests)
    .then(result => {
      console.log(result);
    })
    .catch(error => {
      console.log(error);
    });
}

// 添加请求拦截器
axios.interceptors.request.use(config => {
  if (pendingRequestCount >= 4) {
    return Promise.reject(new Error('too many requests'));
  }
  return config;
});

// 调用发送请求函数
sendRequest();

在以上示例中，发送了 12 个请求，每次紧接着发送下一个请求，请求在请求队列中等待，并且同时只有 4 个请求在进行中。

示例二

假设有一个页面需要连续进行多个请求，在请求过程中需要限制请求队列，避免过多请求拥堵。

在这种情况下，可以使用队列方式实现 axios 请求队列限制：

// 声明一个空队列
const requestQueue = [];

// 发送请求
function sendRequest(config) {
  return new Promise((resolve, reject) => {
    requestQueue.push({
      url: config.url,
      options: config,
      resolve,
      reject,
    });
    if (requestQueue.length <= 5) {
      doRequest();
    }
  });
}

// 取出一个请求并发送
function doRequest() {
  if (requestQueue.length === 0) {
    return;
  }
  const { url, options, resolve, reject } = requestQueue.shift();
  axios.request({
    url,
    ...options,
  })
  .then(resp => {
    resolve(resp);
    doRequest();
  })
  .catch(error => {
    reject(error);
    doRequest();
  });
}

// 发送连续请求
async function sendRequests() {
  const urls = [
    '/api/1',
    '/api/2',
    '/api/3',
    '/api/4',
    '/api/5',
    '/api/6',
    '/api/7',
    '/api/8',
    '/api/9',
    '/api/10',
    '/api/11',
    '/api/12',
  ];
  for (url of urls) {
    await sendRequest({
      url,
    });
  }
}

// 调用发送请求函数
sendRequests();

在以上示例中，依次发送了 12 个请求，同时只有 5 个请求在进行中，其余请求在请求队列中等待。