探探 Promise

166 阅读1分钟
   promise想必前端筒子们都已经很熟悉了,自己也是用了很久,最近看了些promise周边,写写自己的二次理解。

更新知识点一,以前只知道promise 的链式调用,但有一个关键点: then方法反返回新的promise,但是then函数中注册的回调函数仍然属于上一个promsie

反手我就开始表演

new Promise((resolve, reject) => {
    resolve(1)
    resolve(2)
    reject('error')
}).then(res => {
    console.log('first promise resolve value:', res)
    throw Error('second thenable promise will be rejected')
}, err => {
    console.log('first promise reject', err)
}).then(res => {
    console.log('second thenable promise resolve', res)
}).catch(err => {
    console.log('second thenable promise reject error:', err)
})

瞜一眼输出:

first promise resolve valueL 1
second thenable promise reject error: Error: second thenable promise will be rejected

反手我再来一个🌰

new Promise((resolve, reject) => {
    resolve(1)
    resolve(2)
    reject('error')
}).then(res => {
    console.log('first promise resolve value:', res)
    return 'second thenable promise will be resolved'
}, err => {
    console.log('first promise reject', err)
}).then(res => {
    console.log('second thenable promise resolve:', res)
}).catch(err => {
    console.log('second thenable promise reject error', err)
})

康康输出

first promise resolve value: 1
second thenable promise resolve: second thenable promise will be resolved

敲重点,从上面两个例子不难看出:

1.首先promise的状态不可逆: 要么pending => fulfilled, 要么pending => rejected
2.then方法每次都返回新的Promise,但是then 方法中 注册的回调函数仍然属于上一个Promise

那我们回过头来理一下Promise 执行的基本过程:

1. 初始化Promise 的状态(pending);
2. 立即执行Promise传入的fn, 将Promise内部的resolve, reject 作为参数传给fn,按事件机制的时机处理;
3. 执行then(...), 注册回调处理数组(then方法可被同一个promise调用多次,then方法的毁掉函数可能返回的仍然是个promise)
4. then方法中注册的回调函数执行的时机,也就是可runnable态,是由promise的resolve或者reject的时机来确定的