JavaScript Promise.all 和 Promise.race 方法介绍和简要实现

lewif 发布于2019-08-23 15:55 / 2270人阅读

摘要：方法接受一个包含对象或普通值的数组或其它可迭代对象作为参数，并返回一个。需要一个数组，按顺序记录返回结果。如果使用类似的方式遍历，为避免闭包只能传入变量引用的问题，需要嵌套一层自执行函数。如果其中之一的对象，也会立即。

Promise.all() 方法接受一个包含 Promise 对象或普通值的数组(或其它可迭代对象)作为参数，并返回一个 Promise。当所有 Promise 对象都 resolve 后，将所有 resolve 值以数组形式作为 Promise.all() resolve 的结果。如果其中之一的 Promise 被 reject，立即以第一个 reject 的值作为 Promise.all() reject 结果。

在实际应用中，如果需要从几个接口获取数据，并且要在所有数据到达后才执行某些操作，就可以使用Promise.all()。

const p1 = new Promise(function (resolve) { setTimeout(resolve, 200, 1) })
const p2 = Promise.resolve(2)
const p3 = 3
Promise.all([p1, p2, p3]).then(function (res) { console.log(res) }) // [1,2,3]

以下是代码实现，需要一个计数器，来确认所有 promise 对象都已经 resolved，之后返回结果。需要一个数组，按顺序记录返回结果。如果使用类似 for (var i = 0; i < iterable[i]; i++) 的方式遍历，为避免闭包只能传入变量引用的问题，需要嵌套一层自执行函数。这里使用 for ... in 循环，使函数可以支持除数组外的其它可迭代对象，如数据结构 Set。

const all = function (iterable) {
  return new Promise(function (resolve, reject) {
    let count = 0, ans = new Array(count)
    for (const i in iterable) {
      const v = iterable[i]
      if (typeof v === "object" && typeof v.then === "function") {
        v.then(function (res) {
          ans[i] = res
          if (--count === 0) resolve(ans)
        }, reject)
        count++
      } else {
        ans[i] = v
      }
    }
  })
}

const p1 = new Promise(function (resolve) { setTimeout(resolve, 200, 1) })
const p2 = Promise.resolve(2)
const p3 = 3
all([p1, p2, p3]).then(function (res) { console.log(res) }) // [1,2,3]

同 Promise.all()，Promise.race() 方法接受一个包含 Promise 对象或普通值的数组(或其它可迭代对象)作为参数，并返回一个 Promise。一旦其中之一的 Promise 对象 resolve 以后，立即把 resolve 的值作为 Promise.race() resolve 的结果。如果其中之一的对象 reject，Promise.race也会立即 reject。

在实际应用中，如果可以从几个接口获取相同的数据，哪个接口数据先到就先用哪个，就可以使用Promise.race()，所需时间等于其中最快的那个接口。下面是代码：

const race = function (iterable) {
  return new Promise(function (resolve, reject) {
    for (const i in iterable) {
      const v = iterable[i]
      if (typeof v === "object" && typeof v.then === "function") {
        v.then(resolve, reject)
      } else {
        resolve(v)
      }
    }
  })
}

const p1 = new Promise(function (resolve) { setTimeout(resolve, 200, 1) })
const p2 = new Promise(function (resolve) { setTimeout(resolve, 100, 2) })
race([p1, p2]).then(function (res) { console.log(res) }) // 2

GPU云服务器云服务器 javascript实现方法介绍腾讯云服务器注册和配置流程接口和实现类 python方法和类

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

转载请注明本文地址：https://www.ucloud.cn/yun/102540.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
异步解决方案----Promise与Await

摘要：前言异步编程模式在前端开发过程中，显得越来越重要。随着新标准的到来，处理异步数据流又有了新的方案。接下来我们介绍这两种处理异步编程的方案。仍在继续执行，但执行结果将被丢弃。使得异步代码看起来像同步代码，再也没有回调函数。前言异步编程模式在前端开发过程中，显得越来越重要。从最开始的XHR到封装后的Ajax都在试图解决异步编程过程中的问题。随着ES6新标准的到来，处理异步数据流又有了新...

Blackjun 2019-08-29 16:56 评论0 收藏0
异步解决方案----Promise与Await

摘要：前言异步编程模式在前端开发过程中，显得越来越重要。随着新标准的到来，处理异步数据流又有了新的方案。接下来我们介绍这两种处理异步编程的方案。仍在继续执行，但执行结果将被丢弃。使得异步代码看起来像同步代码，再也没有回调函数。前言异步编程模式在前端开发过程中，显得越来越重要。从最开始的XHR到封装后的Ajax都在试图解决异步编程过程中的问题。随着ES6新标准的到来，处理异步数据流又有了新...

Neilyo 2019-08-02 11:43 评论0 收藏0
异步解决方案----Promise与Await

摘要：前言异步编程模式在前端开发过程中，显得越来越重要。随着新标准的到来，处理异步数据流又有了新的方案。接下来我们介绍这两种处理异步编程的方案。仍在继续执行，但执行结果将被丢弃。使得异步代码看起来像同步代码，再也没有回调函数。前言异步编程模式在前端开发过程中，显得越来越重要。从最开始的XHR到封装后的Ajax都在试图解决异步编程过程中的问题。随着ES6新标准的到来，处理异步数据流又有了新...

entner 2019-08-23 12:20 评论0 收藏0
【译】理解回调和Promise

摘要：理解回调和原文自工程师博客，传送门这两个概念是编程语言的基本内容。回调地狱就是滥用回调。通常，在回调中，错误作为第一个参数传递。这个具有这两个函数作为参数的回调称为执行程序。到目前为止，我希望我已经让自己了解了回调和。理解回调和Promise 原文自工程师Fernando Hernandez博客，传送门这两个概念是Javascript编程语言的基本内容。因为这种语言是在异步编程的...

liuyix 2019-08-23 15:17 评论0 收藏0