Skip to content

请实现一个函数,要求能在页面请求很多时,尽可能快地按照顺序输出返回的结果。

Posted on:2023年7月8日 at 15:58
const promiseList = [
  new Promise((resolve) => {
    setTimeout(resolve, 1000);
  }),
  new Promise((resolve) => {
    setTimeout(resolve, 2000);
  }),
  new Promise((resolve) => {
    setTimeout(resolve, 3000);
  }),
  new Promise((resolve) => {
    setTimeout(resolve, 1500);
  }),
];

fn(promiseList);

要实现在页面请求很多时,尽可能快地按顺序输出返回结果,可以使用 Promiseasync/await 来处理异步请求,并通过控制并发请求数量和使用队列来保持请求的顺序。

以下是一个示例函数processRequests,该函数接收一个包含请求URL的数组,并按照顺序发起异步请求,等待所有请求完成后按顺序输出返回的结果:

function processRequests(urls) {
  const results = [];

  // 并发请求数量
  const concurrentLimit = 5;

  // 创建一个队列来存储请求
  const queue = urls.slice();

  // 递归函数,依次处理队列中的请求
  async function sendRequest() {
    if (queue.length === 0) {
      // 队列为空,所有请求已完成,输出结果
      console.log(results);
      return;
    }

    // 取出队列中的下一个请求
    const url = queue.shift();

    try {
      // 发起异步请求
      const response = await fetch(url);

      // 处理请求结果,这里假设返回的是文本
      const result = await response.text();

      // 将结果存入数组中
      results.push(result);

      // 递归调用自身,继续处理下一个请求
      sendRequest();
    } catch (error) {
      // 处理请求错误
      console.error(`Request failed for ${url}:`, error);

      // 递归调用自身,继续处理下一个请求
      sendRequest();
    }
  }

  // 控制并发请求数量,同时发送多个请求
  for (let i = 0; i < concurrentLimit; i++) {
    sendRequest();
  }
}

使用示例:

const urls = [
  "https://api.example.com/1",
  "https://api.example.com/2",
  "https://api.example.com/3",
  // ...更多请求URL
];

processRequests(urls);

processRequests函数将请求URL数组作为参数,并创建一个队列来存储请求。通过控制并发请求数量,每次最多发送concurrentLimit个请求,等待这些请求完成后再继续处理下一个请求。当所有请求完成后,按顺序输出返回的结果。

原文转自:https://fe.ecool.fun/topic/991e859c-58aa-42e4-8ccb-2e74aba9a083