扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >ES6中的Promise.all()和Promise.race()函数的实现方法
  • 246

0
分享到

ES6中的Promise.all()和Promise.race()函数的实现方法

Promise.all()和Promise.race()函数ES6Promise.all()和Promise.race()Promise.all()和Promise.race() 2023-02-03 12:02:52 246人浏览 薄情痞子
摘要

目录es6中的Promise.all()和Promise.race()函数补充：ES6 Promise.race和Promise.all方法一、Pomise.all的使用二、Prom

ES6中的Promise.all()和Promise.race()函数

Promise.all() 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

var pAll = Promise.all([p1, p2, p3])

Promise.all 方法的参数不一定是数组，但是必须具有 iterator 接口，且返回的每个成员都是 Promise 实例。

返回值 pAll 的状态由 p1、p2、p3 决定，分成两种情况：

  • 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
  • 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

手写实现Promise.all()函数：

var PromiseAll = function (promises) {
  return new Promise((resolve, reject) => {
    // 判断是否具有 iterator 接口：return typeof promises[Symbol.iterator] === 'function'
    if (typeof promises[Symbol.iterator] !== 'function') {
      reject(`TypeError: ${promises} is not iterable`)
    }
    if (promises.length === 0) {
      return resolve([])
    }
    const len = promises.length
    var result = []
    for (let p of promises) {
      Promise.resolve(p).then(res => {
        result.push(res)
        if (result.length === len) {
          resolve(result)
        }
      }).catch(err => {
        reject(err)
      })
    }
  })
}

验证使用PromiseAll()：

const p1 = Promise.resolve(3) // 等价于 new Promise((resolve, reject) => resolve(3))
const p2 = true
const p3 = 'hello'
const p4 = Promise.reject('rej')
var pAll = PromiseAll([p1, p2, p3]).then(res => {
  console.log('pAll-res:', res) // [3, true, 'hello']
}).catch(err => {
  console.log('pAll-err:', err) // 有reject就输出第一个reject的结果 Error: fail
})

Promise.race() 方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

var pRace = Promise.race([p1, p2, p3])

只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。

那个率先改变的Promise实例的返回值，就传递给p的返回值。

输出第一个获取到的结果，无论是resolve还是reject

手写实现Promise.race()函数：

var PromiseRace = function (promises) {
  return new Promise((resolve, reject) => {
    // 判断是否具有 iterator 接口：return typeof promises[Symbol.iterator] === 'function'
    if (typeof promises[Symbol.iterator] !== 'function') {
      reject(`TypeError: ${promises} is not iterable`)
    }
    if (promises.length === 0) {
      return resolve([])
    }
    for (let p of promises) {
      Promise.resolve(p).then(res => {
        resolve(res)
      }).catch(err => {
        reject(err)
      })
    }
  })
}

验证使用PromiseRace()：

const p1 = Promise.resolve(3) // 等价于 new Promise((resolve, reject) => resolve(3))
const p2 = true
const p3 = 'hello'
const p4 = Promise.reject('rej')
var pRace = PromiseRace([p1, p2, p3]).then(res => {
  console.log('pRace-res:', res) // 3
}).catch(err => {
  console.log('pRace-err:', err)
})

补充：ES6 Promise.race和Promise.all方法

一、Pomise.all的使用

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。

eg：

let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {
  resolve('success')
})

let p3 = Promse.reject('失败')

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})

Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失败了，打出 '失败'
})

eg:

let wake = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}秒后醒来`)
    }, time)
  })
}

let p1 = wake(3000)
let p2 = wake(2000)

Promise.all([p1, p2]).then((result) => {
  console.log(result)       // [ '3秒后醒来', '2秒后醒来' ]
}).catch((error) => {
  console.log(error)
})

Promse.all在处理多个异步处理时非常有用，比如说一个页面上需要等两个或多个ajax的数据返回之后才正常显示，在此之前只显示loading图标。
eg：

let wake = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}秒后醒来`)
    }, time)
  })
}

let p1 = wake(3000)
let p2 = wake(2000)

Promise.all([p1, p2]).then((result) => {
  console.log(result)       // [ '3秒后醒来', '2秒后醒来' ]
}).catch((error) => {
  console.log(error)
})

需要特别注意的是，Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。

二、Promise.race的使用

  • 顾名思义，Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2,
  • p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。Promise.race方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。Promise.race方法的参数与Promise.all方法一样，如果不是 Promise
  • 实例，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。

eg:

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  },1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('failed')
  }, 500)
})

Promise.race([p1, p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)  // 打开的是 'failed'
})

到此这篇关于ES6的Promise.all()和Promise.race()函数的文章就介绍到这了,更多相关Promise.all()和Promise.race()函数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: ES6中的Promise.all()和Promise.race()函数的实现方法

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

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

猜你喜欢
  • ES6中的Promise.all()和Promise.race()函数的实现方法
    目录ES6中的Promise.all()和Promise.race()函数补充：ES6 Promise.race和Promise.all方法一、Pomise.all的使用二、Prom...
    99+
    2023-02-03
    Promise.all()和Promise.race()函数 ES6 Promise.all()和Promise.race() Promise.all()和Promise.race()
  • ES6 Promise.all的使用方法以及其细节详解
    ES6 Promise.all用法 Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。可以将多个 Promise 实例，包装成一个新的 P...
    99+
    2024-04-02
  • async/await实现Promise.all()的方式
    目录一、Promise.all()简介二、async/await实现Promise.all()1、方式一2、方式二三、async/await与Promise.all()结合使用一、P...
    99+
    2022-12-19
    async/await实现Promise.all() async Promise.all()
  • 如何使用ES6的Promise.all实现至少请求多长时间
    这篇文章主要为大家展示了“如何使用ES6的Promise.all实现至少请求多长时间”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用ES6的Promise...
    99+
    2024-04-02
  • 怎么使用ES6的Promise.all实现至少请求多长时间
    本篇内容介绍了“怎么使用ES6的Promise.all实现至少请求多长时间”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1、背景我们都知道a...
    99+
    2023-06-17
  • python的函数和方法(中)
    目录匿名函数1.什么是匿名函数2.如何声明/调用一个匿名函数（lambda）3.匿名函数的几种使用方式4.匿名函数的组合使用总结匿名函数 1.什么是匿名函数 lambda是个匿名函...
    99+
    2024-04-02
  • Golang函数的算法和数据结构实现方法
    作为一种相对较新的编程语言，Go语言（也通常称为Golang）已被越来越多的开发者所青睐。Golang的一大特点就是速度快，而这是得益于其高效的并发机制和出色的算法实现。在Golang中，函数是非常重要的概念，成为了程序员高效编写代码的关键...
    99+
    2023-05-17
    算法 Golang 数据结构
  • ES5和Es6数组方法的区别
    本篇文章给大家分享的是有关ES5和Es6数组方法的区别，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。初衷： 在面试中，面试官经常问到说一下Es...
    99+
    2024-04-02
  • Golang函数的同步和异步的实现方法
    Golang是一种支持并发编程的高级编程语言，它提供了丰富的并发编程机制和语法特性，方便开发者实现复杂的多线程或多协程程序。其中，同步和异步是并发编程中常用的两种方式，本文将介绍Golang函数的同步和异步的实现方法及其使用场景。一、同步函...
    99+
    2023-05-18
    异步 同步 Golang函数
  • ES6中如何实现Class类的静态方法
    这篇文章给大家分享的是有关ES6中如何实现Class类的静态方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个...
    99+
    2024-04-02
  • C++中strlen函数的三种实现方法
    目录一、strlen函数是什么二、strlen的三种实现方法1、第一种方法（直接）2、第二种方法（递归）3、第三种方法（指针-指针）四、小结一、strlen函数是什么 我们经常用到s...
    99+
    2024-04-02
  • golang函数中的方法值是如何实现的？
    在 go 中，方法值将特定值与方法配对，允许在对象上调用方法。方法值由类型的值和该类型上定义的方法组成，通过类型.方法(参数)语法访问，方法值通过将接收器值和方法代码存储在内存中实现，从...
    99+
    2024-05-24
    golang 方法值
  • es6中箭头函数和普通函数的区别有哪些
    这篇文章主要介绍es6中箭头函数和普通函数的区别有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ 区别：1、箭头函数的定义要比普通函数定义简洁、清晰得...
    99+
    2024-04-02
  • python中以函数作为参数(回调函数)的实现方法
    目录python以函数作为参数(回调函数)python函数的参数类型一、必须参数二、关键字参数三、默认参数四、不定长参数总结python以函数作为参数(回调函数) 纯粹是自己学习总结...
    99+
    2023-01-04
    python函数 python函数为参数 python回调函数
  • ES6中函数参数的默认值
    小编给大家分享一下ES6中函数参数的默认值，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！函数参数的默认值形参初始值function add(a, b, c&n...
    99+
    2024-04-02
  • 数组some和every是不是es6的方法
    今天小编给大家分享一下数组some和every是不是es6的方法的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我...
    99+
    2024-04-02
  • 如何使用es6中的Object.assign()方法实现浅拷贝
    这篇文章主要为大家展示了“如何使用es6中的Object.assign()方法实现浅拷贝”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用es6中的Object.assign()方法实现浅拷...
    99+
    2023-06-17
  • python 回调函数和回调方法的实现分析
    回调与事件驱动 回调函数有比较重要的意义：它在是事件驱动的体现 我们试想一个场景，如果我们触发了某个事件，比如点击事件 那么只要给这个点击事件绑定一个或多个处理事件，也就是回调函数 我们就可以在点击事件被触...
    99+
    2022-06-04
    回调 函数 方法
  • es6数组扩展的方法
    本篇内容介绍了“es6数组扩展的方法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1.扩展运算符含义： 扩展运算符，三个点(...),将一个...
    99+
    2023-06-04
  • es6实现深拷贝的方法是什么
    ES6实现深拷贝的方法有多种，以下是其中一种常用的方法：1. 使用`JSON.parse()`和`JSON.stringify()`...
    99+
    2023-10-09
    es6
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作