如何限制 Vue 中 Ajax 请求的并发数量？

Mr.哲铭提问于 2026-03-20 14:09:20 阅读 4

前端

我在用 Vue 做一个文件上传功能，需要同时上传多个文件，但不想让所有请求一起发出去，怕压垮服务器。试过直接用 Promise.all，结果一下子全发了，有没有办法控制最多同时发 3 个请求？

下面是我现在的代码，就是简单循环调用 uploadFile：

<script>
methods: {
  async handleUpload(files) {
    files.forEach(file => this.uploadFile(file));
  },
  uploadFile(file) {
    return axios.post('/upload', file);
  }
}
</script>

Ajax请求并发控制

我来解答赞 0 收藏

反馈

1 条解答

宇文博硕 Lv1

遇到这个问题别走弯路，Promise.all 确实会一次性发起所有请求，这样对服务器压力很大。我们可以用一个队列来控制并发数量，比如用一个数组保存当前正在进行的请求，当有请求完成时再发起新的请求，确保同一时间最多只有三个请求在进行。

下面是一个简单的实现方式，用了 async 和 await 来控制并发：

methods: {

  async handleUpload(files) {

    const maxConcurrent = 3;

    const requestsInFlight = [];



    for (const file of files) {

      // 如果当前进行中的请求达到了最大并发数，则等待其中一个请求完成

      if (requestsInFlight.length >= maxConcurrent) {

        await Promise.race(requestsInFlight);

      }



      const requestPromise = this.uploadFile(file);



      // 将新的请求添加到队列中，并且在完成后将其从队列中移除

      requestsInFlight.push(requestPromise);

      requestPromise.finally(() => {

        const index = requestsInFlight.indexOf(requestPromise);

        if (index > -1) {

          requestsInFlight.splice(index, 1);

        }

      });

    }



    // 等待所有请求完成

    await Promise.all(requestsInFlight);

  },

  uploadFile(file) {

    return axios.post('/upload', file);

  }

}

这段代码的关键在于维护了一个 requestsInFlight 数组，用来跟踪哪些请求正在处理。每次发起新请求前，检查这个数组的长度是否达到了最大并发数，如果达到了就用 Promise.race 等待其中任意一个请求完成后再继续发起新的请求。这样就能很好地控制并发数量了。

2026-03-20 15:04