实现 JavaScript 异步方法 Promise.all

mushang 发布于2019-08-21 12:03 / 464人阅读

摘要：本次的任务假如。。。。。引擎发生了重大故障，方法变成了，为了拯救世界，需要开发一个模块来解决此问题。实现首先要知道是什么是对异步编程的一种抽象。数组中任何一个为的话，则整个调用会立即终止，并返回一个的新的对象。

本次的任务

假如。。。。。

JavaScript v8 引擎发生了重大故障，Promise.all 方法变成了 undefined ，为了拯救 JavaScript 世界，需要开发一个模块来解决此问题。

使用者需要在代码入口处引入我们开发的模块就可渡过此劫，但要求三个月后官方修改此版本，代码无修改就能自动切换到官方版本。实现 Promise.all

首先要知道 Promise 是什么

promise 是对异步编程的一种抽象。它是一个代理对象，代表一个必须进行异步处理的函数返回的值或抛出的异常。

promise 最早是在 commonjs 社区提出来的，当时提出了很多规范。比较接受的是 promise/A 规范。后来人们在这个基础上。提出了 promise/A+规范，也就是实际上的业内推行的规范。ECMAScript 6.0 也是采用的这种规范。

英文版：https://promisesaplus.com/

中文版：【翻译】Promises/A+规范

上面的规范中主要定义的 then 的实现方式，也就是只规定了 Promise 的核心， Promise.race，Promise.all 等 api 没有规定。

ECMAScript 6.0 Promise.all 规范

Node.js 兼容性如下图点击查看在线版

特点

Promise 不需要编译器/解释器的支持

将来可能成为主流的 async-await，以及曾经火过一把的 generator + co，这些都是需要编译器或者解释器级别的支持才能使用。

而 Promise，是完全可以利用语言已有特性，作为一个库来实现！即使在非常原始的JS运行环境，你也可以自己实现一个 Promise，而不需要等待其他人的帮助。

Promise 是语言无关的

Promise 还是独立于语言的，如果你要给另外一种编程语言实现 Promise，只要照葫芦画瓢就行了。

promise 怎么用

请看这里，阮一峰的 ECMAScript 6 入门 Promise

实现 Promise.all

Promise.all 接收一个 promise 对象的数组作为参数，当这个数组里的所有 promise 对象全部变为resolve或有 reject 状态出现的时候，它才会去调用 .then 方法,它们是并发执行的。

Promise.all 简介

Promise.all(promiseArray) 方法是 Promise 对象上的静态方法，该方法的作用是将多个 Promise 对象实例包装，生成并返回一个新的 Promise 实例。

参数：promiseArray，是一个 Promise 实例数组

var p1 = Promise.resolve(1),
    p2 = Promise.resolve(2),
    p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
    console.log(results);  // [1, 2, 3]
});

在上面的方法中，promise 数组中所有的 promise 实例都变为resolve 的时候，该方法才会返回，并将所有结果传递 results 数组中。promise 数组中任何一个 promise 为 reject 的话，则整个 Promise.all 调用会立即终止，并返回一个 reject 的新的 promise 对象。reject 使用示例如下：

var p1 = Promise.resolve(1),
    p2 = Promise.reject(2),
    p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
    //then方法不会被执行
    console.log(results);
}).catch(function (e){
    //catch方法将会被执行，输出结果为：2
    console.log(2);
});

总结 promise.all 的特点

1、接收一个 Promise 实例的数组或具有 Iterator 接口的对象，

2、如果元素不是 Promise 对象，则使用 Promise.resolve 转成 Promise 对象

3、如果全部成功，状态变为 resolved，返回值将组成一个数组传给回调

4、只要有一个失败，状态就变为 rejected，返回值将直接传递给回调
all() 的返回值也是新的 Promise 对象

实现 Promise.all 方法

function promiseAll(promises) {
  return new Promise(function(resolve, reject) {
    if (!isArray(promises)) {
      return reject(new TypeError("arguments must be an array"));
    }
    var resolvedCounter = 0;
    var promiseNum = promises.length;
    var resolvedValues = new Array(promiseNum);
    for (var i = 0; i < promiseNum; i++) {
      (function(i) {
        Promise.resolve(promises[i]).then(function(value) {
          resolvedCounter++
          resolvedValues[i] = value
          if (resolvedCounter == promiseNum) {
            return resolve(resolvedValues)
          }
        }, function(reason) {
          return reject(reason)
        })
      })(i)
    }
  })
}

npms 地址 promise-all-simple

参考

自己动手实现ES6 Promise

JavaScript Promise迷你书

Promise对象Promise.all()方法的使用

深入 Promise(一)——Promise 实现详解

深入理解 Promise (上)

扩展阅读

深入浅出js（Node.js）异步流程控制

混合云服务器托管 javascript实现方法实现异步调用 javascript异步函数 JavaScript异步机制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87389.html

javascript异步之Promise.all()、Promise.race()、Promise.

摘要：的执行与状态无关当得到状态不论成功或失败后就会执行，原文链接参考链接对象同期异步系列文章推荐谈一谈javascript异步javascript异步中的回调javascript异步与promisejavascript异步之Promise.resolve()、Promise.reject()javascript异步之Promise then和catchjavascript异步之async...

clasnake 2019-08-23 14:53 评论0 收藏0
现代JS中的流程控制：详解Callbacks 、Promises 、Async/Await

摘要：控制台将显示回调地狱通常，回调只能由一个异步函数调用。更多资源使更友好规范使用异步函数简化异步编码旅程异步编程是一项在中无法避免的挑战。 JavaScript经常声称是_异步_。那是什么意思？它如何影响发展？近年来这种方法有何变化？请思考以下代码： result1 = doSomething1(); result2 = doSomething2(result1); 大多数语言都处理每...

shadowbook 2019-08-29 16:29 评论0 收藏0
现代JS中的流程控制：详解Callbacks 、Promises 、Async/Await

摘要：控制台将显示回调地狱通常，回调只能由一个异步函数调用。更多资源使更友好规范使用异步函数简化异步编码旅程异步编程是一项在中无法避免的挑战。 JavaScript经常声称是_异步_。那是什么意思？它如何影响发展？近年来这种方法有何变化？请思考以下代码： result1 = doSomething1(); result2 = doSomething2(result1); 大多数语言都处理每...

oujie 2019-08-23 11:28 评论0 收藏0
现代JS中的流程控制：详解Callbacks 、Promises 、Async/Await

摘要：控制台将显示回调地狱通常，回调只能由一个异步函数调用。更多资源使更友好规范使用异步函数简化异步编码旅程异步编程是一项在中无法避免的挑战。 JavaScript经常声称是_异步_。那是什么意思？它如何影响发展？近年来这种方法有何变化？请思考以下代码： result1 = doSomething1(); result2 = doSomething2(result1); 大多数语言都处理每...

anquan 2019-08-02 11:19 评论0 收藏0
JavaScript Promise启示录

摘要：近几年随着开发模式的逐渐成熟，规范顺势而生，其中就包括提出了规范，完全改变了异步编程的写法，让异步编程变得十分的易于理解。最后，是如此的优雅但也只是解决了回调的深层嵌套的问题，真正简化异步编程的还是，在端，建议考虑。本篇，简单实现一个promise，主要普及promise的用法。一直以来，JavaScript处理异步都是以callback的方式，在前端开发领域callback机制...

Juven 2019-08-21 12:16 评论0 收藏0