系列文章
- Promise源码解密-PromisesA+标准
- Promise源码解密-同步版
- Promise源码解密-异步版
- Promise源码解密-then的链式调用
- Promise源码解密-catch/resolve/reject/race
创作不易 拒绝白嫖 点个赞呗
关注专栏 Promise源码解密,带你走进Promise的深处！！！
then的用法
- 通过return 给下一个then传值，成功/失败的返回值，最后都是传到下一个then的成功会回调
let t = new Promise((resolve, reject) => { console.log(a) // 执行console会报错，最终只会执行reject }) t.then((res)=>{ return res },error=>{ return error }).then( (res) => { console.log(res.toString(),'res===='); // ReferenceError: a is not defined res==== }, (error) => { console.log(error); } );
- then中的onFulfilled/onReject 是可选的, 下面的例子，第一个then没有return值，但是第二个then也可以接受到值，最终输出 then 回调可选。
let t = new Promise((resolve, reject) => { resolve('then 回调可选') }) t.then().then( (res) => { console.log(res); }, (error) => { console.log(error); } );
- 实例不可 循环引用，报错 : Chaining cycle detected for promise #
let p = new Promise((resolve, reject) => { resolve('不可循环引用') }) var p2=p.then(()=>{ return p2 // 返回的值还是p2 })
完整代码
// 定义状态常量 const STATUS_PENDING = "pending"; const STATUS_FULFILLED = "fulfilled"; const STATUS_REJECTED = "rejected"; 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; console.log(y, 'yyyyyyyyyyyy') // 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) } } class MyPromise { // 接收一个 执行器 // new Promise的时候，执行器立即执行， // 执行的时候根据指定函数执行 // 并且程序报错的情况下 constructor(executor) { this.status = STATUS_PENDING; this.value = undefined; this.reason = undefined; // 这里的两个数据，相当于订阅者的篮子，then相当于订阅者，接收到发布者的函数，保存在篮子里 this.onFulfilledCallBacks = []; this.onRejectCallBacks = []; try { // 这里将传入的resolve和reject变为类中的调用的话。 // (resolve, reject) => { // resolve("then链式调用");=>this.resolve(then链式调用) // } executor(this.resolve, this.reject); } catch (error) { // 报错的话直接将错误原因作为reason this.reject(error); } } // 这里为啥使用箭头函数而不是resolve(){} // 这是因为上面的executor调用的时候，resolve中的this其实是undefined // executor单独调用了resolve/reject 这时，这两个方法存在于执行是的环境，this不再指向实例 // 箭头函数内部的this总是指向定义时所在的对象 resolve = (value) => { // 判断状态是不是 if (this.status === STATUS_PENDING) { console.log("执行resolve"); // 这里接收传进来的结果 this.value = value; this.status = STATUS_FULFILLED; this.onFulfilledCallBacks.forEach((fn) => { fn(); }); } }; reject = (reason) => { if (this.status === STATUS_PENDING) { console.log("执行reject"); // 这里接收传进来的错误的结果 this.reason = reason; this.status = STATUS_REJECTED; // 这里相当于发布的动作 this.onRejectCallBacks.forEach((fn) => { fn(); }); } }; then(onFulfilled, onReject) { onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (value) => value; onReject = typeof onReject === "function" ? onReject : (reason) => reason; console.log("执行then时的状态: ", this.status); let promise2 = new MyPromise((resolve, reject) => { if (this.status === STATUS_FULFILLED) { // 这个地方使用settimeout的目的是获取到promise2。因为setTimeout是异步的， // 会等到赋值给promise2结束后才执行， // 这里的resolvePromise的作用是为了区分x是普通值还是新的promise还是函数 // 如果直接resolve（x）的话会导致，输出的是[object Object] res====，并不是想要的值 setTimeout(() => { // 这里try进行了捕获异常，在最外面的executor不是进行了捕获了？ // 这是因为异步里面的方法不会被最外层的那个捕获到 try { console.log("执行 onFulfilled"); // 这里的x是啥？ 是then中回调的return的返回值 let x = onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0); } if (this.status === STATUS_REJECTED) { setTimeout(() => { try { console.log("执行 onReject"); let x = onReject(this.reason); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0); } if (this.status === STATUS_PENDING) { this.onFulfilledCallBacks.push(() => setTimeout(() => { try { let x = onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0) ); this.onRejectCallBacks.push(() => setTimeout(() => { try { let x = onRejected(this.reason); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0) ); } }); return promise2; } } // 下面的函数相当于发布者 let t = new MyPromise((resolve, reject) => { // 指定执行哪个，resolve和reject最终只会执行一个 // console.log(a) // 执行console会报错，最终只会执行reject // // resolve("res") // reject('reject') // setTimeout(() => { resolve("then链式调用"); // }, 1000) }); t.then(() => { return new MyPromise((resolve) => { console.log(2); setTimeout(() => { resolve(3); }, 3000); }); }).then( (res) => { console.log(res.toString(), "res===="); }, (error) => { console.log(error); } );
