理解和使用Promise.all和Promise.race

一、promise.all的使用

说明
Promise.all 可以将多个Promise实例包装成一个新的Promise实例，等待所有都完成（或第一个失败）
返回值
成功的时候返回的是一个数组，失败的时候则返回先被reject失败状态的值

实例代码如下

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)      //  失败的消息
})

代码模拟

let test = (time) => {return new Promise((resolve, reject) => {setTimeout(() => {resolve(`${time / 1000}秒后测试`)}, time)})
}let p1 = test(3000)
let p2 = test(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的使用

Promise.race([p1,p2,p3])里面哪个结果获得的快，就返回哪个结果，不管结果本身是成功状态还是失败状态

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

至今还没有场景应用到Promise.race

promise.all的使用相关推荐

setTimeout、setInterval、promise、async/await的顺序详解（多种情况，非常详细~）
本文很长,列举的情况很多. 在阅读本文之前,如果您有充足的时间,请新建一个项目与本文一同实践. 每段代码都有对应的解释,但是自己动手尝试印象才会更深哦~ setInterval:表示多久执行一次,需要 ...
C++多线程：异步操作std::async和std::promise
文章目录 std::async 简介使用案例 std::promise 简介成员函数总结之前的文章中提到了C++多线程中的异步操作机制 C++ 多线程:future 异步访问类(线程之间安全便 ...
ES6中的Promise详解
Promise 在 JavaScript 中很早就有各种的开源实现,ES6 将其纳入了官方标准,提供了原生 api 支持,使用更加便捷. 定义 Promise 是一个对象,它用来标识 JavaScri ...
关于ES6中Promise的应用-顺序合并Promise，并将返回结果以数组的形式输出
1.Promise 基础知识梳理创建一个Promise实例 const promise = new Promise(function(resolve, reject) {if (success){r ...
promise实现多个请求并行串行执行
早上查资料,偶然发现这个话题,发现自己并不会,于是乎,下来研究了一下. 想想之前我们用jquery写请求的时候,要实现请求的串行执行,我们可能是这么做的. $.ajax({url: '',data: ...
异步编程之Promise(2)：探究原理
异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力异步编程之Promise(2):探究原理异步编程之Promise(3):拓展进阶异步编程之Generator(1)--领略魅 ...
自己动手写cpu pdf_自己动手写 Promise
这段时间在学习Promise,但始终不得要领.为了更好地理解Promise,我决定自己实现一个简易版的Promise,以学习Promise工作原理.该工程名为ToyPromise,仓库地址如下: ht ...
promise 和 async await区别
什么是Async/Await? async/await是写异步代码的新方式,以前的方法有回调函数和Promise. async/await是基于Promise实现的,它不能用于普通的回调函数. as ...
Promise - js异步控制神器
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 首先给来一个简单的demo看看Promise是怎么使用的: <!DOCTYPE html> ...
Promise的实例用法
设定函数 function chiFan() {return new Promise(function(resolve, reject) {console.log("chiFan" ...

promise.all的使用

一、promise.all的使用

实例代码如下

代码模拟

注意

一、Promise.race的使用

promise.all的使用相关推荐

最新文章

热门文章