js-最简实现 promise 源码,异步链式调用的理解
手写
Promise
也是面试的一个特色项目,本篇将用简洁的代码带你了解Promise
的异步链式调用。
非标准 A+ 规范,想要深入的可以去看 A+ 规范实现的 Promise
Promise
代码
// promise 运行则执行回调函数,
// resolve 函数被执行的时候调用当前实例下挂载的 then 函数。
// 参数1:回调函数
function Promise2(executor) {
const self = this;
self.onResolvedCallback = [];
// 定义 resolve 函数,接受参数 value
// resolve 的作用为执行当前实例下的所有 then 函数
function resolve(value) {
// A+ 规范
self.value = value;
// 此时的 callback 为执行 then 的时候传入的回调
self.onResolvedCallback.forEach(callback => callback());
}
executor(resolve.bind(this));
}
Promise2.prototype.then = function (onResolved) {
// 此时的 this 指向和下面的promise中 this 指向是两个不同的对象,切勿混乱
const self = this;
// 记住这里的 resolve 是为了调用下一次的 then,执行了才会调用
return new Promise2(function (resolve) {
// push 到 then 回调栈中,方便 promise 执行 resolve 的时候执行他
self.onResolvedCallback.push(function () {
// 执行 then 的回调函数,返回值分两种情况,一种是正常返回和返回异步的 promise
const result = onResolved(self.value);
// 所以这里需要判断回调函数的返回值是否在promise的原型链上
if (result instanceof Promise2) {
// 此时的 result 为 promise,所以我们需要等他执行完毕之后才能执行当前 promise 的下一个 then 的回调
// 所以在 result 的第一个 then 函数执行的时候即可
result.then(resolve)
} else {
// 如果是正常的返回值的话,把返回值带个下一个 then 函数就好
resolve(result);
}
})
})
}
原文推荐
https://juejin.im/post/5e6f4579f265da576429a907#heading-0
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 kshao-blog-前端知识记录!
评论