Vue 并发请求优化 100个并发请求 10个10个执行 请代码演示

以下是一个使用Vue进行并发请求优化的代码示例：

// 在Vue组件中使用axios库进行请求
import axios from 'axios';

export default {
  data() {
    return {
      responseData: [], // 存储每个请求的响应数据
    };
  },
  methods: {
    async fetchData(url) {
      try {
        const response = await axios.get(url);
        return response.data;
      } catch (error) {
        console.error(error);
        return null;
      }
    },
    async fetchParallel() {
      const urls = [
        // 这里填写你需要请求的URL列表
        'https://example.com/api/1',
        'https://example.com/api/2',
        // ...
        'https://example.com/api/100',
      ];

      // 分批并发请求，每次并发10个请求
      const batchSize = 10;
      const batches = Math.ceil(urls.length / batchSize);

      for (let i = 0; i < batches; i++) {
        const batchUrls = urls.slice(i * batchSize, (i + 1) * batchSize);
        const batchRequests = batchUrls.map(url => this.fetchData(url));

        const batchResponses = await Promise.all(batchRequests);
        this.responseData.push(...batchResponses);
      }

      console.log(this.responseData); // 输出所有请求的响应数据
    },
  },
};

在上述代码中，首先导入了`axios`库用于发送HTTP请求。在`fetchData`方法中，使用`axios.get`发送GET请求，并返回响应数据。

在`fetchParallel`方法中，定义了需要请求的URL列表，然后将URL列表按照每批10个URL进行划分。在每个批次中，使用`Array.map`方法将每个URL传递给`fetchData`方法，得到一个包含所有请求的Promise数组。然后使用`Promise.all`方法等待所有请求完成，并将响应数据追加到`responseData`数组中。

最后，可以通过`console.log`输出所有请求的响应数据。

以上是一个简单的并发请求优化的示例，你可以根据自己的需要进行修改和扩展。