正文

掌握JS实现最多10个并发请求的秘诀

/0 浏览量
0321

在JavaScript中实现最多10个并发请求，通常涉及到对异步编程的深入理解和使用。以下是一些关键步骤和技巧，帮助你有效地管理并发请求。

1. 使用Promise和async/await

JavaScript的Promise对象是异步编程的基础。使用Promise，你可以创建一个异步操作，并在操作完成时提供相应的结果。结合async/await语法，可以使异步代码的编写和阅读更加直观。

示例代码：

async function fetchData(url) {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

async function fetchMultipleUrls(urls) {
  const results = [];
  for (const url of urls) {
    results.push(fetchData(url));
  }
  return Promise.all(results);
}

const urls = ['https://api.example.com/data1', 'https://api.example.com/data2', /* ... */];
fetchMultipleUrls(urls).then(results => {
  console.log(results);
});

2. 控制并发数

为了限制并发请求的数量，你可以使用Promise.allSettled和for...of循环结合setTimeout来实现。

示例代码：

function limitConcurrentRequests(urls, limit) {
  let executing = 0;
  let results = [];
  let index = 0;

  const enqueue = () => {
    if (executing < limit && index < urls.length) {
      executing++;
      fetch(urls[index]).then(response => {
        results.push(response);
        executing--;
        index++;
        enqueue();
      }).catch(error => {
        results.push({ status: 'rejected', reason: error });
        executing--;
        index++;
        enqueue();
      });
    }
  };

  enqueue();
  return results;
}

const urls = ['https://api.example.com/data1', 'https://api.example.com/data2', /* ... */];
limitConcurrentRequests(urls, 10).then(results => {
  console.log(results);
});

3. 使用axios库

axios是一个基于Promise的HTTP客户端，它提供了许多便利的功能，包括取消请求、转换请求和响应数据等。

示例代码：

const axios = require('axios');

const fetchMultipleUrls = async (urls, limit) => {
  const results = [];
  const executing = new Set();

  for (const url of urls) {
    const p = axios.get(url);
    executing.add(p);

    if (executing.size >= limit) {
      const result = await Promise.race(executing);
      executing.delete(result);
    }
  }

  const remaining = [...executing];
  results.push(...await Promise.all(remaining));
  return results;
};

const urls = ['https://api.example.com/data1', 'https://api.example.com/data2', /* ... */];
fetchMultipleUrls(urls, 10).then(results => {
  console.log(results);
});

4. 总结

通过使用Promise、async/await、setTimeout和axios等工具，你可以有效地控制JavaScript中的并发请求数量。记住，合理地管理并发请求对于提高应用程序的性能和用户体验至关重要。

-- 展开阅读全文 --