JavaScript使用Promise控制并发请求

 更新时间:2023年06月26日 11:29:51   作者:前端技术栈  
当我们需要同时处理多个请求时,如何避免请求之间的冲突和混乱呢,这就是今天我们要探讨的话题——如何使用Promise控制并发请求,感兴趣的可以了解一下

开篇

在现代Web开发中,异步请求已经成为了必不可少的一部分。然而,当我们需要同时处理多个请求时,如何避免请求之间的冲突和混乱呢?这就是今天我们要探讨的话题——如何使用Promise控制并发请求。

在JavaScript中可以通过Promise.all()、Promise.race()、async/await等不同方式来实现对异步并发任务的控制。以下是一种使用Promise.all()方法实现并发控制的示例:

Promise.all()

const urls = ["url1", "url2", ... ,"url100"]; 
const maxConcurrentNum = 10; // 最大并发数 
// 数组分块,chunk表示每批次数量,返回数组二维数组 
function chunk(arr, chunk) { 
  let result = []; 
  for (let i = 0, len = arr.length; i < len; i += chunk) { 
    result.push(arr.slice(i, i + chunk)); 
   } 
   return result; 
 }
// 异步请求方法 
function fetchUrl(url) { 
  return new Promise((resolve, reject) => { 
    fetch(url) 
      .then(res => resolve(res)) 
      .catch(err => reject(err)); 
     }); 
   }
// 对url数组进行分块处理
const chunkedUrls = chunk(urls, maxConcurrentNum);
(async function () {
  try {
    for (let urls of chunkedUrls) {
      const promises = urls.map(url => fetchUrl(url));
      // 等待所有promises完成执行,并将结果存入results数组中
      const results = await Promise.all(promises);
      console.log('results:', results);
    }
  } catch (err) {
   console.error(err);
  }
})();

以上代码通过将数组分成多个数目相等的小数组,每次最多只开启maxConcurrentNum个并发请求,以此来控制并发数量。每当一组请求完成后再发送新的一批请求,可以实现对异步任务的并发控制。

Promise.race()

以下是使用Promise.race()方法来控制并发的示例代码:

const promiselist = [];
for (let i = 0; i < 100; i++) {
  const promise = fetch(`https://example.com/data${i}.json`);
  promiselist.push(promise);
}
Promise.race(promiselist)
  .then(response => {
    // handle the fastest response here
  })
  .catch(error => {
    console.error(error);
  });

async/await

以下是使用async/await方式控制并发请求的示例代码:

async function getData() {
  const promiselist = [];
  for (let i = 0; i < 100; i++) {
    const promise = fetch(`https://example.com/data${i}.json`);
    promiselist.push(promise);
  }
  const responses = await Promise.all(promiselist);
  for (const response of responses) {
    // handle each response here 
  }
}
getData().catch(error => {
  console.error(error);
});

在上面的代码中,我们首先创建了一个async函数,并在该函数中使用for循环来发送所有的请求,并将每个请求的Promise对象存储在一个数组中。 然后,我们使用await关键字来异步等待所有Promise对象都被解决,并将解决值存储在一个数组中。 最后,我们在处理每个响应时对数组进行迭代。

如果我们只需要等待最快的请求,我们可以使用Promise.race()方法,并将其包装在一个async函数中。 这种方法与使用Promise.all()的方式相似,只需使用不同的Promise方法即可。

以下是使用async/await方式控制并发请求的示例代码,其中使用Promise.race()方法:

async function getData() {
  const promiselist = [];
  for (let i = 0; i < 100; i++) {
    const promise = fetch(`https://example.com/data${i}.json`);
    promiselist.push(promise);
  }
  const response = await Promise.race(promiselist);
  // handle the fastest response here
}
getData().catch(error => {
  console.error(error);
});

在上述代码中,我们使用async函数来生成Promise对象,然后使用Promise.race()方法等待最快的解决Promise对象,并处理其解决值。

除了Promise.all()和Promise.race()以及async/await等方法外,还有其他用于控制并发请求的可行方法,例如:

手动控制计数器

可以使用变量来手动计数,以控制请求并发数。例如,在循环中,当计数器达到最大并发请求数时,将其用于等待请求完成,然后递增计数器以允许下一个请求。
以下是手动控制计数器的示例代码:

function getData() {
 const limit = 5; // maximum concurrent requests
 const dataUrls = ['https://example.com/data1.json', 
                   'https://example.com/data2.json',
                   'https://example.com/data3.json',
                   'https://example.com/data4.json',
                   'https://example.com/data5.json',
                   'https://example.com/data6.json'];
 let counter = 0;
 const getDataPromise = dataUrl => {
   return new Promise((resolve, reject) => {
     fetch(dataUrl)
       .then(response => {
         counter--;
         resolve(response);
       })
       .catch(error => {
         counter--;
         reject(error);
       });
   });
 };
 const getDataPromises = dataUrls.map(dataUrl => {
   if (counter < limit) {
     counter++;
     return getDataPromise(dataUrl);
   } else {
     return new Promise(resolve => {
       const interval = setInterval(() => {
         if (counter < limit) {
           counter++;
           clearInterval(interval);
           resolve(getDataPromise(dataUrl));
         }
       }, 100);
     });
   }
 });
 Promise.all(getDataPromises)
   .then(responses => {
     for (const response of responses) {
       // handle each response here
     }
   })
   .catch(error => {
     console.error(error);
   });
}
getData();

在上面的代码中,我们手动地使用计数器来控制最大并发请求数,然后使用setInterval函数来等待可用的请求槽位。

使用第三方库

此外,还有一些第三方库可以使用,例如async.js和p-limit等。p-limit是一个专门用于控制Promise并发的小型库。可以在p-limit文档中找到更多信息和示例。

总结

通过掌握Promise的使用,我们可以轻松应对并发请求,让我们的Web应用更加流畅,用户更加满意。所以,别让并发请求成为你的噩梦,让Promise来帮你解决吧!

到此这篇关于JavaScript使用Promise控制并发请求的文章就介绍到这了,更多相关Promise控制并发请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Javascript实现字数统计

    Javascript实现字数统计

    现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体验。
    2015-07-07
  • javascript+html5实现绘制圆环的方法

    javascript+html5实现绘制圆环的方法

    这篇文章主要介绍了javascript+html5实现绘制圆环的方法,实例分析了javascript实现html5基于canvas绘制圆环的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • js实现新年倒计时效果

    js实现新年倒计时效果

    这篇文章主要介绍了js实现2015年新年倒计时效果,很快就要迎接新的一年,想知道距离2016还有多少天吗?大家可以参考一下这篇文章
    2015-12-12
  • JS FormData对象使用方法实例详解

    JS FormData对象使用方法实例详解

    这篇文章主要介绍了JS FormData对象使用方法,结合实例形式详细分析了FormData对象的基本功能、原理及使用方法,需要的朋友可以参考下
    2020-02-02
  • JavaScript函数的使用教程

    JavaScript函数的使用教程

    这篇文章主要介绍了JavaScript函数的使用教程,JavaScript函数是被设计为执行特定任务的代码块。JavaScript函数会在某代码调用它时被执行。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • JavaScript中使用typeof运算符需要注意的几个坑

    JavaScript中使用typeof运算符需要注意的几个坑

    这篇文章主要介绍了JavaScript中使用typeof运算符需要注意的几个坑,本文总结了4个使用typeof运算符要注意的问题,需要的朋友可以参考下
    2014-11-11
  • Cpage.js给组件绑定事件的实现代码

    Cpage.js给组件绑定事件的实现代码

    Cpage.js是一款轻量级的Mvvm框架,使用TypeScript(JavaScript的超集)开发。下面通过本文给大家分享Cpage.js给组件绑定事件的实现代码,需要的的朋友参考下吧
    2017-08-08
  • js 发布订阅模式的实例讲解

    js 发布订阅模式的实例讲解

    下面小编就为大家带来一篇js 发布订阅模式的实例讲解。小编觉得挺不错的,现在就想给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JavaScript避免内存泄露及内存管理技巧

    JavaScript避免内存泄露及内存管理技巧

    这篇文章主要介绍了JavaScript避免内存泄露及内存管理技巧,主要包括了delete应用、闭包、DOM泄露、Timers计(定)时器泄露等等,需要的朋友可以参考下
    2014-09-09
  • JS中的hasOwnProperty()和isPrototypeOf()属性实例详解

    JS中的hasOwnProperty()和isPrototypeOf()属性实例详解

    hasOwnProperty()和isPrototypeOf()这两个属性都是Object.prototype所提供:Object.prototype.hasOwnProperty()和Object.prototype.isPropertyOf(),下面给大家介绍这两个属性的方法和使用,一起看下吧
    2016-08-08

最新评论