ES6 Promise详解

WEB前端 JS开发 2020年6月10日

Promise 是ES6 中一个 JS 的 Promise 类型对象，用来传递异步操作的消息。有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。Promise 也有一些缺点。首先，一旦新建它就会立即执行，无法中途取消Promise。其次，Promise 内部抛出的错误只通过catch捕获。第三，当处于 Pending 状态时，无法得知进度。下面雷雪松就详细的讲解下 Promise 。

1、创建 Promise
[cc lang=”javascript” escaped=”true”]const promise = new Promise((resolve, reject) => {
// do something here …
if (success) {
resolve(value); // fulfilled
} else {
reject(error); // rejected
}
});[/cc]

2、Promise 方法
Promise.all(iterable)：多个 promise 对象组成的数组。数组中所有的 promise 成功时才会打印 res ，只要有一个失败就会打印 err 。
[cc lang=”javascript” escaped=”true”]Promise.all( [Promise.resolve(1),Promise.resolve(2),Promise.resolve(3)])
.then(res=>{
console.log(res) //[ 1, 2, 3]
}).catch(err => {
console.log(err)
});[/cc]

Promise.allSettled(iterable):每个结果对象，都有一个status 字符串。如果状态为fulfilled，则存在一个value 。如果状态为rejected，则说明原因 。
[cc lang=”javascript” escaped=”true”]
Promise.allSettled([Promise.resolve(1), Promise.resolve(2),Promise.resolve(3)])
.then((results) => results.forEach((result) => console.log(result)));
//Object { status: “fulfilled”, value: 1 }
//Object { status: “rejected”, reason: 2 }
//Object { status: “fulfilled”, value: 3 }[/cc]

Promise.race(iterable):多个 promise 对象组成的数组。任意一个Promise对象状态改变，那么p对象状态也会跟着改变。
[cc lang=”javascript” escaped=”true”]let promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘success’)
},1000)
})
let promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject(‘failed’)
}, 500)
})
Promise.race([promise1 , promise2 ]).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error) //failed
})[/cc]

Promise.resolve(value):返回可以是一个Promise对象，或者是一个带then方法的对象。
[cc lang=”javascript” escaped=”true”]Promise.resolve(“success”).then(function(value) {
console.log(value); // success
}, function(value) {
// 不会被调用
});[/cc]

Promise.reject(reason)：返回一个带有拒绝原因的Promise对象。
[cc lang=”javascript” escaped=”true”]Promise.reject(new Error(‘failed’)).then(function() {
// 不会调用
}, function(error) {
console.error(error); // failed
});[/cc]

3、Promise 原型方法
Promise.prototype.catch(onRejected); Promise 的失败的情况的回调，promise resolve创建的promise对象，永远不会调用catch方法。
[cc lang=”javascript” escaped=”true”]let promise = Promise.reject(‘failed’)
promise.catch(err=>{
console.log(err) // failed
})[/cc]

Promise.prototype.then(onFulfilled, onRejected):Promise 的成功和失败情况的回调
[cc lang=”javascript” escaped=”true”]let promise = new Promise((resolve, reject) => {
resolve(‘success’);
});
promise.then(value => {
console.log(value); // 成功！
}, reason => {
console.error(reason); // 出错了！
});[/cc]

Promise.prototype.finally(onFinally)：在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数。
[cc lang=”javascript” escaped=”true”]let isLoading = true;
let promise = new Promise((resolve, reject) => {
resolve(‘success’);
});
promise.then(value => {
console.log(value); // 成功！
}, reason => {
console.error(reason); // 出错了！
}).finally(function() { isLoading = false; });[/cc]

来源：ES6 Promise详解