Promise规范及应⽤

目标

• 了解Promise A+规范
• 掌握pormise原理

要点

Promise术语

1. promise 是⼀个有then⽅法的对象或者是函数，⾏为遵循本规范
2. thenable 是⼀个有then⽅法的对象或者是函数
3. value 是promise状态成功时的值，也就是resolve的参数, 包括各种数据类型, 也包括undefined/thenable或者是 promise
4. reason 是promise状态失败时的值, 也就是reject的参数, 表示拒绝的原因
5. exception 是⼀个使⽤throw抛出的异常值

PromiseA+规范

Promise States

1. pending

• 初始的状态, 可改变
• ⼀个promise在resolve或者reject前都处于这个状态
• 可以通过 resolve改变状态为 fulfilled
• 可以通过 reject改变状态为 rejected

2. fulfilled

• resolve执行之后的最终态, 不可变
• 必须拥有⼀个value值

3. rejected

• reject执行之后的最终态, 不可变
• 必须拥有⼀个reason值

resolve方法

• 把promise的status值修改为fulfilled

resolve(value) {
     // 这个判断很重要
     if (this.status === 'pending') {
         this.value = value;
         this.status = 'fulfilled';
     }
}

reject方法

• 把promise的status值修改为rejected

reject(reason) {
     if (this.status === 'pending') {
         this.reason = reason;
         this.status = 'rejected';
     }
}

then方法

then(onFulfilled, onRejected) {}

1. 参数要求

• onFulfilled 必须是函数类型, 如果不是函数, 应该被忽略.

// isFunction不写了，老司机一看就知道判断是否是函数的方法(❁´◡`❁)
// onFulfilled 如果不是函数就直接返回resolve的值 value
const fulfilledFunc = isFunction(onFulfilled) ? onFulfilled : (value) => {
    return value
}

• onRejected 必须是函数类型, 如果不是函数, 应该被忽略.

// onRejected 如果不是函数就直接返回reject的值 reason
const rejectedFunc = isFunction(onRejected) ? onRejected : (reason) => {
    return reason
}

如果then方法被调用的时候status是 fulfilled 那就调用fulfilledFunc，status是 rejected rejectedFunc，如果status是pending怎么办呢🤷‍♀️， 小意思哥有办法：搞两个数组把调用队列先存一下，等到status改变的时候按照顺序一个一个 盘它✔

switch (status) {
    case 'fulfilled': {
         fulfilledFunc()
         break;
    }
    case 'rejected': {
         rejectedFunc()
         break;
    }
    // status ➡ fulfilled FULFILLED_CALLBACK_LIST.forEach...
    // status ➡ rejected  REJECTED_CALLBACK_LIST.forEach...老司机早已看透后面的代码😎
    case 'pending': {
         FULFILLED_CALLBACK_LIST.push(fulfilledFunc)
         REJECTED_CALLBACK_LIST.push(rejectedFunc)
    }
}

2. onFulfilled 特性

• promise状态变成 fulfilled 时，应该调⽤ onFulfilled, 参数是value
• promise状态变成 fulfilled 之前, 不会被调⽤.
• 只能被调⽤⼀次(所以在实现的时候需要⼀个变量(called = true / false)来限制执⾏次数)

3. onRejected 特性

• promise状态变成 rejected 时，应该调⽤ onRejected, 参数是reason
• promise状态变成 rejected 之前, 不会被调⽤.
• 只能被调⽤⼀次(所以在实现的时候需要⼀个变量(called = true / false)来限制执⾏次数)

4. then⽅法可以被调⽤多次

• promise.then()
• promise.then()
• ...

5. then回调函数返回值

• then 应该返回⼀个promise eg: promise2 = promise1.then(onFulfilled, onRejected);

6. resolvePromise 这是个什么东东？

• 网上一大堆长篇大论的解释，感觉不太直观，哈哈哈（笑出🐷叫）
• 通俗易懂的说法：就是递归调用处理多次调用then回调方法，因为then返回的是promise或者就是value，比如x是上个promise通过onFulfilled执行后返回的promise2,那就继续递归调用resolvePromise(promise2, x, resolve, reject),解释的头大，小二上代码⬇⬇⬇

补充知识点

✔附上手写实现： github.com/xumenghao/p…