Promise源码解密-Promise A+标准

举报
搞前端的半夏 发表于 2021/10/24 23:20:32 2021/10/24
【摘要】 术语 1. Promisepromise 是一个拥有 then 方法的 object 或 function ,其行为符合本规范 2. thenable是一个定义了 then 方法的 object 或 function 3. 值(value)指任何 JavaScript 的合法值(包括 undefined , thenable 和 promise); 4. 异常(exception)通...

术语

1. Promise

promise 是一个拥有 then 方法的 object 或 function ,其行为符合本规范

2. thenable

是一个定义了 then 方法的 object 或 function

3. 值(value)

指任何 JavaScript 的合法值(包括 undefined , thenable 和 promise);

4. 异常(exception)

通过throw抛出一个值

5. 原因(reason)

一个promise被拒绝的原因

class Promise {
    constructor(executor) {
        this.value = undefined;
        this.reason = undefined;
        }    
 }

function Promise(){}
Promise.prototype.then=function(){}

要求

1. Promise 的状态

当前Promise的状态只能是下面三种状态中的一种,不能存在多种状态。

示例:

const STATUS_PENDING = "pending";
const STATUS_FULFILLED = "fulfilled";
const STATUS_REJECTED = "rejected";
class Promise {
 	constructor(executor) {
         this.status = STATUS_PENDING;
	}
}

1.1. 等待(Pending)

处于等待时,状态可以迁移至执行态或拒绝态

1.2. 执行(Fulfilled)

处于执行时:

  • 不能迁移至其他任何状态
  • 必须拥有一个不可变的终值

1.3. 拒绝(Rejected)

处于拒绝时:

  • 不能迁移至其他任何状态
  • 必须拥有一个不可变的reason

这里的不可变指的是恒等(即可用 === 判断相等),引用数据类型只要保证地址相等即可。

new Promise((resolve, reject) => {
        resolve('成功');
        reject('拒绝')
}).then((res) => {
    console.log(res,"res")
}, (error) => {
    console.log(error,'reason')

})

new Promise()时状态是pending,
当程序执行,也就是(resolve, reject) => {
        resolve('成功');
        reject('拒绝')
},这个执行
这里resolve把值进行了this.value = "成功";,但是并不会this.reason='拒绝',
这是因为只有出现了执行就不会出现拒绝,最后输出的结果是"成功 res",
如果注释掉resolve('成功');,最后输出的结果是 "拒绝 reason"

2. Then 方法

一个 promise 必须提供一个 then 方法以访问其当前值、终值 和 reason。

promise 的 then 方法接受两个函数参数:

promise.then(onFulfilled, onRejected)

then((res) => {
    console.log(res,"res")
}, (error) => {
    console.log(error,'reason')

})

2.1 onFulfilledonRejected 都是可选参数。

  • 如果 onFulfilled 不是函数,必须被忽略
  • 如果 onRejected 不是函数,必须被忽略

2.2 onFulfilled

如果 onFulfilled 是函数:

  • promise 执行结束后其必须被调用,其第一个参数为 promise的value

  • promise 执行结束前其不可被调用

  • 其调用次数不可超过一次

    new Promise((resolve, reject) => {
     resolve(123)
    }).then(result => {
        console.log(result);
    }, error => {
        console.log(error);
    });
    // 这里resolve执行结束才会执行then,这里的result就是终值
    

2.3 onRejected

如果 onRejected 是函数:

  • promise 被拒绝执行后其必须被调用,其第一个参数为 promise 的reason
  • promise 被拒绝执行前其不可被调用
  • 其调用次数不可超过一次

2.4 调用时机

onFulfilledonRejected 只有在执行环境堆栈仅包含平台代码时才可被调用 >> 注1

2.5 调用要求

onFulfilledonRejected 必须被作为函数调用(即没有 this 值)>> 注2

2.6 多次调用

then方法可以被同一个promise 调用多次

  • promise 成功执行时,所有 onFulfilled 需按照其注册顺序依次回调

  • promise 被拒绝执行时,所有的 onRejected 需按照其注册顺序依次回调

    new Promise.then().then()
    

2.7 返回

then 方法必须返回一个 promise 对象 >> 注3, 这也就是then可以被多次调用的原因。


Promise.prototype.then=function(onFulfilled, onRejected){
    return new Promise()
}

promise2 = promise1.then(onFulfilled, onRejected);
  • 如果 onFulfilled 或者 onRejected 返回一个值 x ,则运行下面的 Promise 解决过程[[Resolve]](promise2, x)

    promise1.then((value)=>{
    	return x;
    }, (reason)=>{
        return x
    }),
      // 这种情况需要处理x函数还是值还是其他情况 ,所有用到了  Promise 解决过程
      // 这种情况直接
    Promise.prototype.then=function(onFulfilled, onRejected){
         return let promise2 = new Promise((resolve,reject)=>{
             try {
                let x = onFulfilled(this.value);
                resolvePromise(promise2, x, resolve, reject);
           } catch (e) {
               reject(e);
           }
        })
    }
    
  • 如果 onFulfilled 或者 onRejected 抛出一个异常 e ,则 promise2 必须拒绝执行,并返回拒因 e

    promise1.then((value)=>{
    	throw new Error()
    }, (reason)=>{
        throw new Error()
    }),
      // 这种情况直接
    Promise.prototype.then=function(onFulfilled, onRejected){
         return new Promise((resolve,reject)=>{
             try {
               // console.log("执行 onFulfilled");
               //   这里的x是啥? 是then中回调的return的返回值
                onFulfilled(this.value);
               或者
               	onReject(this.reason)
           } catch (e) {
               reject(e);
           }
        })
    }
       
          
    
  • 如果 onFulfilled 不是函数且 promise1 成功执行, promise2 必须成功执行并返回相同的值

    promise1.then(1,2),
    
    Promise.prototype.then=function(onFulfilled, onRejected){
         if (this.status === STATUS_FULFILLED) {
             return new Promise((resolve,reject)=>{
                 if(typeof onFulfilled !== "function" ){
                     resolve(onFulfilled)
                 }
                 if(typeof onRejected !== "function" ){
                     resolve(onRejected)
                 }
             })
         }
    }
    
  • 如果 onRejected 不是函数且 promise1 拒绝执行, promise2 必须拒绝执行并返回相同的reason

    promise1.then(1,2),
    
    Promise.prototype.then=function(onFulfilled, onRejected){
       if (this.status === STATUS_PENDING) {
             return new Promise((resolve,reject)=>{
                reject(onRejected)
             })
         }
    }
    

Promise 解决过程

Promise 解决过程是需要输入一个 promise 和一个值 x 的一个抽象的操作,称为 [[Resolve]](promise, x),如果 xthen 方法且看上去像一个 Promise ,解决程序即尝试使 promise 接受 x 的状态;否则其用 x 的值来执行 promise 。(x是返回值,请注意上面的例子)

解决过程步骤:

xpromise 相等

如果 promisex 指向同一对象,直接 throw new TypeError

let p1=new Promise(resolve=>{
    resolve()
})
let p2=p1.then(data=>{
    // 返回了p2
    return p2
})

x 是Promise

如果 x 是一个 Promise ,则使 promise 接受 x 的状态 >>注4

  • 如果 x 处于等待, promise 需保持等待直至 x 被执行或拒绝
  • 如果 x 处于执行,用相同的值执行 promise
  • 如果 x 处于拒绝,用相同的reason拒绝 promise

x 为对象或函数

如果 x 为对象或者函数:

  • x.then 赋值给 then>> 注5

  • 如果取 x.then 的值时抛出错误 e ,则以 e 为reason拒绝 promise

  • 如果then是函数,将x作为函数的作用域this调用。传递两个回调函数作为参数,第一个参数叫做resolvePromise

    ,第二个参数叫做rejectPromise:

    • 如果 resolvePromise 以值 y 为参数被调用,则运行 [[Resolve]](promise, y)

    • 如果 rejectPromise 以reason r 为参数被调用,则以reason r 拒绝 promise

    • 如果 resolvePromiserejectPromise 均被调用,或者被同一参数调用了多次,则优先采用首次调用并忽略剩下的调用

    • 如果调用then方法抛出了异常e:

      • 如果 resolvePromiserejectPromise 已经被调用,则忽略之
  • 否则以 e 为reason拒绝 promise

    • 如果 then 不是函数,以 x 为参数执行 promise
  • 如果 x 不为对象或者函数,以 x 为参数执行 promise

function resolvePromise(promise2, x, resolve, reject) {
    // 用来保存是否已经reject或者resolve过
    let called
    if (promise2 === x) {
        throw new TypeError('Chaining cycle detected for promise')
    }
    // 如果是函数或者object的话先默认是promise
    if (x != null && (typeof x === 'object' || typeof x === 'function')) {
        try {
            let then = x.then
            // 如果then是函数的话
            if (typeof then === 'function') {
                // 为啥不直接x.then()
                // 因为then已经判断过是不是function,但是x.then没有判断过
                // 就让then执行 第一个参数是this   后面是成功的回调 和 失败的回调
                //  这里的y是啥,如果x是promsie的话,那么y就是x中的resolve/reject的值
                then.call(x, y => {
                    // 成功和失败只能调用一个

                    if (called) return;
                    called = true;
                    // resolve的结果依旧是promise 那就继续解析
                    resolvePromise(promise2, y, resolve, reject);
                }, err => {
                    // 成功和失败只能调用一个
                    if (called) return;
                    called = true;
                    reject(err);
                })
            } else {
                resolve(x); // 如果不是函数,那就直接返回结果
            }
        } catch (error) {
            // 成功和失败只能调用一个
            if (called) return;
            called = true;
            // 没有then 不是函数也不是普通值
            reject(error)
        }
    } else {
        // x 是一个普通值
        resolve(x)
    }
}

如果一个 promise 被一个循环的 thenable 链中的对象解决,而 [[Resolve]](promise, thenable) 的递归性质又使得其被再次调用,根据上述的算法将会陷入无限递归之中。算法虽不强制要求,但也鼓励施者检测这样的递归是否存在,若检测到存在则以一个可识别的 TypeError 为reason来拒绝 promise >>注6

注释


  • 注1 这里的平台代码指的是引擎、环境以及 promise 的实施代码。实践中要确保 onFulfilledonRejected 方法异步执行,且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行。这个事件队列可以采用“宏任务(macro-task)”机制或者“微任务(micro-task)”机制来实现。由于 promise 的实施代码本身就是平台代码(**译者注:**即都是 JavaScript),故代码自身在处理在处理程序时可能已经包含一个任务调度队列。

  • 注2 也就是说在**严格模式(strict)**中,函数 this 的值为 undefined ;在非严格模式中其为全局对象。

  • 注3 代码实现在满足所有要求的情况下可以允许 promise2 === promise1 。每个实现都要文档说明其是否允许以及在何种条件下允许 promise2 === promise1

  • 注4 总体来说,如果 x 符合当前实现,我们才认为它是真正的 promise 。这一规则允许那些特例实现接受符合已知要求的 Promises 状态。

  • 注5 这里我们存储了x.then的引用 ,然后在if中进行判断,并且可以避免多次访问 x.then 属性。同时这确保了该属性的一致性,因为其值可能在检索调用时被改变。

  • 注6 实现不应该对 thenable 链的深度设限,并假定超出本限制的递归就是无限循环。只有真正的循环递归才应能导致 TypeError 异常;如果一条无限长的链上 thenable 均不相同,那么递归下去永远是正确的行为。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。