扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript异步操作中串行和并行
  • 318

0
分享到

JavaScript异步操作中串行和并行

2024-04-02 19:04:59 318人浏览 安东尼
摘要

目录1、前言2、es5方式3、异步函数串行执行4、异步函数并行执行5、异步函数串行执行和并行执行结合6、es6方式7、async 和await 结合promise all1、前言 本

1、前言

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

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天然自带串行和并行的执行方式，例如串行可以用async和await(前文已经讲解)，并行可以用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个问题：

  • 1、在调用Promise.all前就已经创建好了promises，实际上promise已经执行了
  • 2、你这个实现必须等前面batchSize个promise resolve，才能跑下一批的batchSize个，也就是promise all全部成功才可以。

改进如下：


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异步操作串行和并行内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: JavaScript异步操作中串行和并行

本文链接: https://lsjlt.com/news/157775.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript异步操作中串行和并行
    目录1、前言2、es5方式3、异步函数串行执行4、异步函数并行执行5、异步函数串行执行和并行执行结合6、es6方式7、async 和await 结合promise all1、前言 本...
    99+
    2024-04-02
  • 怎么使用JavaScript异步操作中串行和并行
    这篇文章主要讲解了“怎么使用JavaScript异步操作中串行和并行”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么使用JavaScript异步操作中串行和并行”吧！1、前言本文写一下js...
    99+
    2023-06-25
  • JavaScript中Promise处理异步的并行与串行
    目录一、异步的“并行” 并行中的综合处理二、异步的“串行”：2.1 then链机制处理2.2 真实项目中，想实现异步的串行，...
    99+
    2022-12-19
    promise串行和并行 js promise的用法总结 promise串行执行
  • JavaScript中Promise如何处理异步的并行与串行
    这篇“JavaScript中Promise如何处理异步的并行与串行”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JavaSc...
    99+
    2023-07-04
  • js怎么实现异步串行与异步并行
    本篇内容主要讲解“js怎么实现异步串行与异步并行”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“js怎么实现异步串行与异步并行”吧!js异步处理方案，js的异步串行与异步并行一、什么是串行，并行，...
    99+
    2023-07-05
  • JavaScript异步操作同步执行的方法
    本文小编为大家详细介绍“JavaScript异步操作同步执行的方法”，内容详细，步骤清晰，细节处理妥当，希望这篇“JavaScript异步操作同步执行的方法”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深...
    99+
    2024-04-02
  • js异步处理方案，js的异步串行与异步并行
    目录js异步处理方案，js的异步串行与异步并行一、什么是串行，并行，并发二、实现异步串行三、实现异步并行js异步处理方案，js的异步串行与异步并行 一、什么是串行，并行，并发 串行：...
    99+
    2023-03-24
    javascript异步处理 js异步串行与并行
  • Java8 CompletableFuture 异步执行操作
    目录1.简介2.异步执行3.守护线程4.处理执行结果1.简介 CompletableFuture 是 JDK8 提供的一个异步执行工具。 示例1： public static...
    99+
    2024-04-02
  • 如何在 Linux 中使用 ASP 和 JavaScript 进行同步操作？
    在 Linux 系统中，ASP 和 JavaScript 是两个非常常用的编程语言，它们可以用于开发各种类型的应用程序。在本文中，我们将探讨如何在 Linux 系统中使用 ASP 和 JavaScript 进行同步操作。我们将介绍一些基本概...
    99+
    2023-10-22
    同步 javascript linux
  • async/await如何让异步操作同步执行
    小编给大家分享一下async/await如何让异步操作同步执行，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！一.前言我们经常会遇到这样的麻烦事,多个函数按顺序执行,返回结果却不是我们预期的...
    99+
    2024-04-02
  • 如何在 Golang 中进行异步数据库操作？
    在 golang 中异步数据库操作有两种主要方式：使用协程：在后台线程中异步执行查询。如果查询被取消，程序会打印 "查询已取消" 信息。使用 goroutine pool：对于处理大量并...
    99+
    2024-05-14
    数据库 异步 golang
  • shell脚本怎么异步并行执行
    在shell脚本中，可以使用以下几种方式来实现异步并行执行：1. 后台执行：在命令后面加上`&`，可以将命令放到后台执行。例如：``...
    99+
    2023-09-22
    shell
  • C#如何使用Task执行异步操作
    目录为什么要使用 Task Task 和 Thread 区别 Task 介绍 Task 简单实现 Task 执行状态 1.等待（Wait） 2. 返回值 3. Task.Delay ...
    99+
    2024-04-02
  • ES6中javascript如何实现异步操作
    这篇文章主要为大家展示了“ES6中javascript如何实现异步操作”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“ES6中javascript如何实现异步操作...
    99+
    2024-04-02
  • 操作系统丶并发并行和线程
    　　1.什么是操作系统: 操作系统是管理和控制计算机硬件与软件资源的计算机程序,是直接运行在"裸机"上的最基本的系统软件,任何其他软件都必须在操作系统的支持下才能运行. 　　2.硬件:硬件是由许多不同功能的模块化的部件组合而成的,并在软...
    99+
    2023-01-30
    线程 操作系统
  • Java和Django并发编程：如何平衡同步和异步操作？
    在当今互联网时代，多线程和并发编程已成为开发人员不可或缺的技能之一。Java和Django作为两个流行的编程语言，都提供了强大的并发编程支持。但在进行并发编程时，同步和异步操作的平衡是一个非常关键的问题。在本文中，我们将讨论Java和Dj...
    99+
    2023-09-10
    django 同步 并发
  • Django celery实现异步任务操作,并在后台运行(守护进程)
    没废话，直接上代码。 环境说明： python3.6 django2.0.5 我们使用redis的作为celery任务队列，有一个合成包可以直接安装两者一起使用需要的安装包 直接在终...
    99+
    2024-04-02
  • 怎么对WCF异步调用进行服务操作
    本篇内容主要讲解“怎么对WCF异步调用进行服务操作”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么对WCF异步调用进行服务操作”吧!我将服务契约的定义单独形成了一个程序集，并在客户端直接引用了...
    99+
    2023-06-17
  • JavaScript 中怎么对Cookie进行操作
    本篇文章为大家展示了JavaScript 中怎么对Cookie进行操作，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。Cookie 只是存储在计算机浏览器中的小型文本...
    99+
    2024-04-02
  • 微信小程序中如何使用Promise进行异步操作
    这篇文章主要介绍微信小程序中如何使用Promise进行异步操作，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！微信小程序中使用Promise进行异步流程处理我们知道，JavaScrip...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作