文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么使用JavaScript异步操作中串行和并行

2023-06-25 16:18

关注

这篇文章主要讲解了“怎么使用JavaScript异步操作中串行和并行”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么使用JavaScript异步操作中串行和并行”吧!

1、前言

本文写一下jses5es6针对异步函数,串行执行和并行执行的方案。已经串行和并行结合使用的例子。

2、es5方式

在es6出来之前,社区nodejs中针对回调地狱,已经有了promise方案。假如多个异步函数,执行循序怎么安排,如何才能更快的执行完所有异步函数,再执行下一步呢?这里就出现了js的串行执行和并行执行问题。

3、异步函数串行执行

var items = [ 1, 2, 3, 4, 5, 6 ];var results = [];function async(arg, callback) {  console.log('参数为 ' + arg +' , 1秒后返回结果');  setTimeout(function () { callback(arg * 2); }, 1000);}function final(value) {  console.log('完成: ', value);}function series(item) {  if(item) {    async( item, function(result) {      results.push(result);      return series(items.shift());// 递归执行完所有的数据    });  } else {    return final(results[results.length - 1]);  }}series(items.shift());

4、异步函数并行执行

上面函数是一个一个执行的,上一个执行结束再执行下一个,类似es6(es5之后统称es6)中 async 和await,那有没有类似promise.all这种,所有的并行执行的呢?

可以如下写:

var items = [ 1, 2, 3, 4, 5, 6 ];var results = [];function async(arg, callback) {  console.log('参数为 ' + arg +' , 1秒后返回结果');  setTimeout(function () { callback(arg * 2); }, 1000);}function final(value) {  console.log('完成: ', value);}items.forEach(function(item) {// 循环完成  async(item, function(result){    results.push(result);    if(results.length === items.length) {// 判断执行完毕的个数是否等于要执行函数的个数      final(results[results.length - 1]);    }  })});

5、异步函数串行执行和并行执行结合

假如并行执行很多条异步(几百条)数据,每个异步数据中有很多的(https)请求数据,势必造成tcp 连接数不足,或者堆积了无数调用栈导致内存溢出。所以并行执行不易太多数据,因此,出现了并行和串行结合的方式。

代码可以如下书写:

var items = [ 1, 2, 3, 4, 5, 6 ];var results = [];var running = 0;var limit = 2;function async(arg, callback) {  console.log('参数为 ' + arg +' , 1秒后返回结果');  setTimeout(function () { callback(arg * 2); }, 1000);}function final(value) {  console.log('完成: ', value);}function launcher() {  while(running < limit && items.length > 0) {    var item = items.shift();    async(item, function(result) {      results.push(result);      running--;      if(items.length > 0) {        launcher();      } else if(running == 0) {        final(results);      }    });    running++;  }}launcher();

6、es6方式

es6天然自带串行和并行的执行方式,例如串行可以用asyncawait(前文已经讲解),并行可以用promise.all等等。那么针对串行和并行结合,限制promise all并发数量,社区也有一些方案,例如

tiny-async-pool、es6-promise-pool、p-limit

简单封装一个promise all并发数限制解决方案函数

function PromiseLimit(funcArray, limit = 5) { // 并发执行5条数据  let i = 0;  const result = [];  const executing = [];  const queue = function() {    if (i === funcArray.length) return Promise.all(executing);    const p = funcArray[i++]();    result.push(p);    const e = p.then(() => executing.splice(executing.indexOf(e), 1));    executing.push(e);    if (executing.length >= limit) {      return Promise.race(executing).then(        () => queue(),        e => Promise.reject(e)      );    }    return Promise.resolve().then(() => queue());  };  return queue().then(() => Promise.all(result));}

使用:

// 测试代码const result = [];for (let index = 0; index < 10; index++) {  result.push(function() {    return new Promise((resolve, reject) => {      console.log("开始" + index, new Date().toLocaleString());      setTimeout(() => {        resolve(index);        console.log("结束" + index, new Date().toLocaleString());      }, parseInt(Math.random() * 10000));    });  });}PromiseLimit(result).then(data => {  console.log(data);});

修改测试代码,新增随机失败逻辑

// 修改测试代码 随机失败或者成功const result = [];for (let index = 0; index < 10; index++) {  result.push(function() {    return new Promise((resolve, reject) => {      console.log("开始" + index, new Date().toLocaleString());      setTimeout(() => {        if (Math.random() > 0.5) {          resolve(index);        } else {          reject(index);        }        console.log("结束" + index, new Date().toLocaleString());      }, parseInt(Math.random() * 1000));    });  });}PromiseLimit(result).then(  data => {    console.log("成功", data);  },  data => {    console.log("失败", data);  });

7、async 和await 结合promise all

async function PromiseAll(promises,batchSize=10) { const result = []; while(promises.length > 0) {   const data = await Promise.all(promises.splice(0,batchSize));   result.push(...data); }return result;}

这么写有2个问题:

改进如下:

async function asyncPool(array,poolLimit,iteratorFn) {  const ret = [];  const executing = [];  for (const item of array) {    const p = Promise.resolve().then(() => iteratorFn(item, array));    ret.push(p);    if (poolLimit <= array.length) {      const e = p.then(() => executing.splice(executing.indexOf(e), 1));      executing.push(e);      if (executing.length >= poolLimit) {        await Promise.race(executing);      }    }  }  return Promise.all(ret);}

使用:

const timeout = i => new Promise(resolve => setTimeout(() => resolve(i), i));return asyncPool( [1000, 5000, 3000, 2000], 2,timeout).then(results => {    ...});

感谢各位的阅读,以上就是“怎么使用JavaScript异步操作中串行和并行”的内容了,经过本文的学习后,相信大家对怎么使用JavaScript异步操作中串行和并行这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯