axios 队列请求-摩杜云开发者社区

实现 "axios 队列请求" 的过程可以分为以下几个步骤：

创建一个请求队列类
封装 axios 请求函数
将请求加入队列
发送请求
处理响应

下面我将逐步为你解释每一个步骤的具体操作，并提供相应的代码示例。

1. 创建一个请求队列类

首先，我们需要创建一个请求队列类，用于管理所有的请求。这个类需要具备以下功能：

添加请求到队列中
从队列中移除请求
发送队列中的请求

class RequestQueue {
  constructor() {
    this.queue = [];
    this.isSending = false;
  }

  add(request) {
    this.queue.push(request);
    if (!this.isSending) {
      this.send();
    }
  }

  remove(request) {
    const index = this.queue.indexOf(request);
    if (index > -1) {
      this.queue.splice(index, 1);
    }
  }

  send() {
    if (this.queue.length > 0) {
      this.isSending = true;
      const request = this.queue[0];
      axios(request.config)
        .then(response => {
          request.resolve(response);
        })
        .catch(error => {
          request.reject(error);
        })
        .finally(() => {
          this.queue.shift();
          this.send();
        });
    } else {
      this.isSending = false;
    }
  }
}

上述代码中，RequestQueue 类包含了一个数组 queue 用于存储请求对象，以及一个表示当前是否正在发送请求的布尔值 isSending。在 add 方法中，我们将请求对象添加到队列中，并在队列为空的情况下立即发送请求。在 send 方法中，我们通过递归调用自身来不断发送队列中的请求，直到队列为空为止。

2. 封装 axios 请求函数

为了方便使用，我们可以封装一个函数来发送 axios 请求，并返回一个 Promise 对象。

function sendRequest(config) {
  return new Promise((resolve, reject) => {
    axios(config)
      .then(response => {
        resolve(response);
      })
      .catch(error => {
        reject(error);
      });
  });
}

上述代码中，sendRequest 函数接受一个 config 对象作为参数，该对象包含了 axios 请求的配置信息。函数内部创建了一个 Promise 对象，并在 axios 请求成功或失败时分别调用 resolve 和 reject 方法来改变 Promise 的状态。

3. 将请求加入队列

现在，我们可以使用 sendRequest 函数来发送请求，并将请求对象添加到队列中。

const requestQueue = new RequestQueue();

function enqueueRequest(config) {
  return new Promise((resolve, reject) => {
    const request = {
      config,
      resolve,
      reject
    };
    requestQueue.add(request);
  });
}

上述代码中，我们定义了一个 enqueueRequest 函数，该函数接受一个 config 对象作为参数，并返回一个 Promise 对象。在函数内部，我们创建了一个请求对象，并将其添加到队列中。

4. 发送请求

当需要发送请求时，我们可以调用 enqueueRequest 函数，并传入请求的配置信息。这样，请求将被添加到队列中，并按照顺序依次发送。

enqueueRequest({
  method: 'get',
  url: '
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

上述代码中，我们调用了 enqueueRequest 函数，并传入一个包含请求方法和 URL 的配置对象。在 Promise 的 then 方法中，我们可以处理请求成功的情况，而在 catch 方法中，我们可以处理请求失败的情况。

5. 处理响应

最后，我们需要在发送请求后，处理服务器返回的响应。我们可以修改 sendRequest 函数，在请求成功时将响应作为参数传递给 resolve 方法，在请求失败时将错误作为参数传递给 reject 方法。

function sendRequest(config) {
  return new Promise((resolve, reject) => {
    axios(config)
      .then(response => {
        resolve(response.data); // 修改这里，将响应数据传递给 resolve 方法
      })
      .catch(error => {
        reject(error); // 修改这里，将错误对象传递给 reject 方法