promise中的all和race方法

promise中的all方法和race方法
这两个方法，都是并行执行多个异步操作。而不同的是，all方式遵循“谁跑得慢，以谁为准执行回调”，而race遵循的是“谁跑的快，以谁为准执行回调”

以下为两个异步函数
function yibu1() {
var p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('第一个异步执行成功')
},3000)
})
return p1
}

function yibu2() {
var p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('第二个异步执行成功')
},2000)
})
return p2
}

当使用all实现并行执行时，结果如下
Promise.all([yibu1(), yibu2()]).then(function (res) {
console.log(res)
}).catch(function (reason) {
console.log(reason)
})

返回的是每个异步函数执行回调后的结果组成的数组
当使用race实现并行执行时，结果如下
Promise.race([yibu1(), yibu2()]).then(function (res) {
console.log(res)
}).catch(function (reason) {
console.log(reason)
})

谁先执行结束，谁先进入回调加粗样式

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) // 失败了，打出 '失败'
})

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

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])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

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'
})

all()方法

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

const p = Promise.all([p1, p2, p3]);
1
上面代码中，Promise.all()方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。另外，Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

p的状态由p1、p2、p3决定，分成两种情况。

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

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

下面是一个具体的例子。

// 生成一个Promise对象的数组
const promises = [2, 3, 5, 7, 11, 13].map(function (id) {
return getJSON('/post/' + id + ".json");
});

Promise.all(promises).then(function (posts) {
// ...
}).catch(function(reason){
// ...
});

promise中的all和race方法相关推荐

前端学习（1260）:promise中的常见api对象方法
es6 Promise.race()方法
Promise.race()方法 Promise.race方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例. const p = Promise.race([p1, p2, ...
promise中的.then方法【待完善】
promise中的.then方法一.promise then 用法详解举例说明:代码示例: 二.Promise中then()方法使用,多次调用.链式调用 1.多次调用`then` 2.链式调用`t ...
【JS】Promise.race()方法例子流程详解
在理清Promise.all()中每个流程的时候实在是头大,理了半天,做此记录以便回顾 promise部分源码如下,只摘取用到的部分 function Promise(excutor) {const ...
Promise.race()方法
Promise.race()方法 Promise.race方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例. const p = Promise.race([p1, p2, ...
[JavaScript] promise中.then()方法
promise中.then()方法 promise的构造函数是同步执行 promise.then中的函数是异步执行 .then()异步执行 : 当此方法执行完后再执行内部的程序是避免了没有获取到数据 ...
promise中的.then()方法
promise中.then()方法 promise的构造函数是同步执行 promise.then中的函数是异步执行 .then()异步执行 : 当此方法执行完后再执行内部的程序是避免了没有获取到数据 ...
ES6中的Promis的使用方法
什么是Promise? Promise是由 CommonJS 在 Promises/A 规范中提出来的,是js一部编程的重要概念,是比较就行的javascript一部变成解决方案之一. 常见的异步编程 ...
Promise第一篇：基本使用方法和串联
目录 1.基本使用 2.Promise的串联 1.基本使用首先清楚promise的过程:事件从unsettled未解决阶段(pending状态)开始发展到settled已解决阶段(resolved和 ...

promise中的all和race方法

promise中的all和race方法相关推荐

最新文章

热门文章