文章目录
JavaScript Pomise API 学习
Promise.xx 表示类方法
Promise.prototype.xxx 表示实例方法
一、Promise 构造函数
executor 参数
- 接收双参数（resolve, reject)， resolve 和 reject 分别是执行成功 与 失败的函数
- Promise 接收立即执行，一般用来处理异步操作
- 运行成功，则 resolve 掉这个 promise
- 运行失败，则 reject 掉
- 如果运行时抛出异常，promise 的状态就会变成 rejected，则 executor 的返回值会被忽略
二、Promise.prototype.then()
// 语法 onFulfilled 【执行成功的回调】 onRejected 【执行失败的回调】
p.then(onFulfilled[, onRejected]);
p.then(value => {
// fulfillment
}, reason => {
// rejection
});
三、Promise.prototype.catch()
// Promise.prototype.catch()
// 出异常案例
let p = new Promise((resolve, reject) => {
reject("error");
});
p.catch(reason => {
console.log(reason); // error
});
四、Promise.resolve(value)
const promise1 = Promise.resolve(123);
promise1.then((value) => {
console.log(value);
// expected output: 123
});
更多示例：传送门
五、Promise.reject(reason)
// 还记得前面是怎么写的吗？ then 传入的是个 executor
Promise.reject(new Error('fail')).then(function() {
// not called
}, function(error) {
console.error(error); // Stacktrace
});
六、Promise.all()
Promise.all(iterable); // Promise 传入的是可迭代的对象（Promise）
简单来说，可以一次接收多个 Promise，只会返回一个 Promise 实例，但是 Promise 是有两种返回情况的
- 所传入的 promise 均正常执行并返回，resolve 的回调结果是一个数组，即我们传入的所有 Promise 实例
- reject 表示只有一个失败，则返回第一个失败的结果
成功的案例
let p = new Promise((resolve, reject) => {
resolve("OK");
});
let p2 = Promise.resolve("Success");
let p3 = Promise.resolve("Nice");
const result = Promise.all([p,p2,3]);
console.log(result);
/**
Promise
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Array(3)
0: "OK"
1: "Success"
2: "Nice"
length: 3
[[Prototype]]: Array(0)
*/
失败的案例
let p = new Promise((resolve, reject) => {
resolve("OK");
});
let p2 = Promise.reject("Error");
let p3 = Promise.resolve("Nice");
const result = Promise.all([p,p2,p3]);
console.log(result);
/**
Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "Error"
*/
七、Promise.allSettled()
let p = new Promise((resolve, reject) => {
resolve("OK");
});
let p2 = Promise.reject("Error");
let p3 = Promise.resolve("Nice");
// const result = Promise.all([p,p2,p3]);
Promise.allSettled([p,p2,p3]).then((results) => {
results.forEach(element => {
console.log(element); // {status:'fullfilled or rejected', value: 'value or reasonn'}
});
})
八、Promise.any()
语法：
Promise.any(iterable); // iterable 一个可迭代的对象, 例如 Array，Set,Map 等。
返回值：
- 如果传入的参数是一个空的可迭代对象，则返回一个 已失败（already rejected） 状态的 Promise。
- 如果传入的参数不包含任何
promise，则返回一个 异步完成 （asynchronously resolved）的 Promise。 - 其他情况下都会返回一个处理中（pending） 的 Promise。 只要传入的迭代对象中的任何一个
promise变成成功（resolve）状态，或者其中的所有的promises都失败，那么返回的promise就会 异步地（当调用栈为空时） 变成成功/失败（resolved/reject）状态。
看个实例吧！
// 返回第一个成功的案例
const pErr = new Promise((resolve, reject) => {
reject("总是失败");
});
const pSlow = new Promise((resolve, reject) => {
setTimeout(resolve, 500, "最终完成");
});
const pFast = new Promise((resolve, reject) => {
setTimeout(resolve, 100, "很快完成");
});
Promise.any([pErr, pSlow, pFast]).then((value) => {
console.log(value);// "很快完成"
// pFast fulfils first
})
// 没有成功的案例，则抛出异常
const pErr = new Promise((resolve, reject) => {
reject('总是失败');
});
Promise.any([pErr]).catch((err) => {
console.log(err); // "AggregateError: No Promise in Promise.any was resolved"
})
九、Promise.race()
语法
Promise.race(iterable); // iterable 是一个可迭代对象 Array,Set,Map 等
示例：
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 500, 'one');
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'two');
});
Promise.race([promise1, promise2]).then((value) => {
console.log(value);
// Both resolve, but promise2 is faster
});
// expected output: "two"
十、Promise.prototype.finally()
语法：
p.finally(onFinally);
p.finally(function() {
// 返回状态为(resolved 或 rejected)
});
示例：
let isLoading = true;
fetch(myRequest).then(function(response) {
var contentType = response.headers.get("content-type");
if(contentType && contentType.includes("application/json")) {
return response.json();
}
throw new TypeError("Oops, we haven't got JSON!");
})
.then(function(json) { /* process your JSON further */ })
.catch(function(error) { console.log(error); })
.finally(function() { isLoading = false; });
十一、Promise 特性
- 支持链式调用, 解决回调地狱问题
- 同步调用
let p = new Promise((resolve, reject) => {
console.log("aaa");
});
console.log("bbb");
// aaa
// bbb
二、原文链接
《Gorit 带你学全栈 — JavaScript 高级应用（第二弹）》
