【JavaScript】Promise 总结

基本使用

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('request success')
    }, 3000)
}).then((data) => {
    console.log(data)
}, (err) => {});

Promise 的三种状态

1. fullfilled；resolve 后 promise 成为满足态
2. rejected；reject 后
3. pending；待决定，没执行 resolve 或者 reject 时

then 的返回值

首先需要知道 then 是对象方法，也就是定义在原形链上面的方法，只能通过 new Promise 调用。then 的返回值是 Promise，可以用 then 链式调用。

then 的返回值分为 2 大类：

1. 普通对象，如 数字、对象、undefined 等
2. Promise 实例对象

普通对象

new Promise((resolve, reject) => {
    // ...
}).then((res) => {
	return 123;
}).then((res) => {
    console.log(res); // 123
})

new Promise
普通对象会被包裹成 Promise 对象，下一级 then 的 resolve 参数就是返回的值。
上面普通对象的写法等价于：

new Promise((resolve, reject) => {
    // ...
}).then((res) => {
	return new Promise(resolve => {
		return 123;
	})
// 这里的 .then 执行的是 new 出来的 promise 的 then，
// 也就是说 这里的 then 已经不是 new 出来的 Promise 的 then 了。
}).then((res) => {
    console.log(res); // 123
})

catch

promise.then.catch
catch 捕获的是从顶层 promise 到该 catch 第一个出现异常的 promise

new Promise((resolve, reject) => {
    return new Promise((resolve, reject) => {
		reject('inner reject')
	})
}).catch(err => {
	console.log(err) // inner reject
})

new Promise((resolve, reject) => {
	reject('outter reject')
}).then((resolve) => {
	return 123;
}).catch(err => {
	console.log(err) // outter reject 
})


new Promise((resolve, reject) => {
	reject('outter reject')
}).then((resolve) => { // 实际上这里根本不会被执行
	reject('inner reject')
	return 123;
}).catch(err => {
	console.log(err) // outter reject 
})

catch 的返回值类型和 then 一样都是 promise，且 catch 的返回值行为同 resolve（也就是不会继续触发后面的 catch）

Promise.xxx 静态方法

Promise.resolve/Promise.reject
传入一个值，返回这个值的 promise 包裹对象：Promise.resolve(111).then((r) => {console.log(r) // 111})
Promise.all
等待所有 Promise fulfilled 后返回在 then 中返回结果数组，如果有 promise reject，则直接跳到 catch。

Promise.allSettled
ES11 新增，功能基本类似 .all，但是当 promise rejected 后不会中断函数执行，这个函数总是 fulfilled 状态。

Promise.race
只要有一个 promise fulfilled，函数整体就 fulfilled。

手写一个简单的 Promise

未完待续