Promise链式调用原理 #3
Comments
|
还是有点理解不了呢 |
|
你哪一步不理解？ |
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class Bromise {
constructor(fn) {
this.state = PENDING;
this.value = null;
this.reason = null;
this.onFulFilledCallbacks = [];
this.onRejectedCallbacks = [];
const resolve = (value) => {
window.addEventListener('message', () => {
// setTimeout(() => {
if (this.state !== PENDING) {
return;
} else {
this.state = FULFILLED;
this.value = value;
this.onFulFilledCallbacks.map(cb => {
this.value = cb(this.value);
});
}
});
window.postMessage('');
}
const reject = (reason) => {
window.addEventListener('message', () => {
// setTimeout(() => {
if (this.state !== PENDING) {
return;
} else {
this.state = REJECTED;
this.reason = reason;
this.onRejectedCallbacks.map(cb => {
this.reason = cb(this.reason);
})
}
});
window.postMessage('');
}
try {
fn(resolve, reject);
} catch(e) {
reject(e);
}
}
then(onFulfiled, onRejected) {
let promise2;
onFulfiled = typeof onFulfiled === 'function'
? onFulfiled : (value) => value;
onRejected = typeof onRejected === 'function'
? onRejected : (reason) => { throw reason };
if (this.state === FULFILLED) {
return (promise2 = new Bromise((resolve, reject) => {
window.addEventListener('message', () => {
try {
let x = onFulfiled(this.value);
resolvePromise(promise2, x, resolve, reject);
} catch(e) {
reject(e);
}
});
window.postMessage('');
}));
}
if (this.state === REJECTED) {
return (promise2 = new Bromise((resolve, reject) => {
window.addEventListener('message', () => {
try {
let x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject);
} catch(e) {
reject(e);
}
});
window.postMessage('');
}))
}
if (this.state === PENDING) {
return (promise2 = new Bromise((resolve, reject) => {
this.onFulFilledCallbacks.push((value) => {
try {
let x = onFulfiled(value);
resolvePromise(promise2, x, resolve, reject);
} catch(e) {
reject(e);
}
});
this.onRejectedCallbacks.push((reason) => {
try {
let x = onRejected(reason);
resolvePromise(promise2, x, resolve, reject);
} catch(e) {
reject(e);
}
})
}))
}
}
catch(onRejected) {
return this.then(null, onRejected);
}
}
function resolvePromise(currPromise, x, resolve, reject) {
if (x === currPromise) {
reject(new TypeError('circular Reference'));
}
if (x instanceof Bromise) {
if (x.state === PENDING) {
x.then(
y => {
resolvePromise(currPromise, y, resolve, reject);
},
reason => {
reject(reason);
}
)
} else {
x.then(resolve, reject);
}
} else if (x && (typeof x === 'function' || typeof x === 'object')) {
let called = false;
try {
let then = x.then;
if (typeof then === 'function') {
then.call(x,
y => {
if (called) return;
called = true;
resolvePromise(currPromise, y, resolve, reject);
},
reason => {
if (called) return;
called = true;
reject(reason);
}
)
} else {
resolve(x);
}
} catch(e) {
if (called) return;
called = true;
reject(e);
}
} else {
resolve(x);
}
}
Bromise.resolve = (args) => {
if (args instanceof Bromise) {
return args;
}
return new Bromise((resolve) => resolve(args));
}
Bromise.reject = (reason) => {
return new Bromise((resolve, reject) => {
reject(reason);
})
}
Bromise.finally = (fn) => {
return this.then((value) => {
return new Bromise.resolve(fn()).then(() => value);
}, (reason) => {
return new Bromise.resolve(fn()).then(() => { throw reason });
})
}
Bromise.all = (fns) => {
return new Bromise((resolve, reject) => {
let count = 0;
let res = [];
fns.forEach((fn, index) => {
fn.then((val) => {
count++;
res[index] = val;
if (count === fns.length) {
resolve(res);
}
}, (reason) => {
reject(reason);
});
});
});
}
Bromise.race = (fns) => {
return new Bromise((resolve, reject) => {
fns.forEach((fn) => {
fn.then(resolve, reject);
})
})
}
Bromise.allSettled = (promiseList) => {
return new Bromise((resolve, reject) => {
const len = promiseList.length;
let count = 0;
let result = [];
if (len === 0) return resolve(result);
promiseList.forEach((promise, index) => {
promise.then((value) => {
count++;
result[index] = {
status: 'fulfilled',
value,
};
if (count === len) resolve(result);
}, (reason) => {
count++;
result[index] = {
status: 'rejected',
reason,
};
if (count === len) resolve(result);
})
})
})
}
Bromise.any = (promiseList) => {
const len = promiseList.length;
let rejectArr = [];
return new Bromise((resolve, reject) => {
promiseList.forEach((promise, index) => {
promise.then((res) => {
resolve(res);
}).catch((err) => {
rejectArr[index] = err;
if (rejectArr.length === len) {
reject(new Error(rejectArr));
}
});
});
});
}
export default Bromise; |
if(typeof then === 'function'){
// newValue 为新产生的 Promise,此时resolve为上个 promise 的resolve
//相当于调用了新产生 Promise 的then方法，注入了上个 promise 的resolve 为其回调
then.call(newValue,resolve, reject)
return
}then.call有点不理解， 我试了 直接 then(resolve) 结果也是一样的。 请问为什么这里要加一个 call来执行呢？ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Promise 必须为以下三种状态之一：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。一旦Promise 被 resolve 或 reject，不能再迁移至其他任何状态（即状态 immutable）。
基本过程：
真正的链式Promise是指在当前promise达到fulfilled状态后，即开始进行下一个promise.
链式调用
先从 Promise 执行结果看一下，有如下一段代码：
显然这里输出了不同的 data。由此可以看出几点：
基于以上几点，我们先写个基于 PromiseA+ 规范的只含 resolve 方法的 Promise 模型:
这个模型简单易懂，这里最关键的点就是在 then 中新创建的 Promise，它的状态变为 fulfilled 的节点是在上一个 Promise的回调执行完毕的时候。也就是说当一个 Promise 的状态被 fulfilled 之后，会执行其回调函数，而回调函数返回的结果会被当作 value，返回给下一个 Promise(也就是then 中产生的 Promise)，同时下一个 Promise的状态也会被改变(执行 resolve 或 reject)，然后再去执行其回调,以此类推下去...链式调用的效应就出来了。
但是如果仅仅是例子中的情况，我们可以这样写：
实际上，我们常用的链式调用，是用在异步回调中，以解决"回调地狱"的问题。如下例子：
用上面的 Promise 模型，得到的结果显然不是我们想要的。认真看上面的模型，执行 callback.resolve 时，传入的参数是 callback.onFulfilled 执行完成的返回，显然这个测试例子返回的就是一个 Promise，而我们的 Promise 模型中的 resolve 方法并没有特殊处理。那么我们将 resolve 改一下:
用这个模型，再测试我们的例子，就得到了正确的结果：
显然，新增的逻辑就是针对 resolve 入参为 Promise 的时候的处理。我们观察一下 test 里面创建的 Promise，它是没有调用 then方法的。从上面的分析我们已经知道 Promise 的回调函数就是通过调用其 then 方法注册的，因此 test 里面创建的 Promise 其回调函数为空。
显然如果没有回调函数，执行 resolve 的时候，是没办法链式下去的。因此，我们需要主动为其注入回调函数。
我们只要把第一个 then 中产生的 Promise 的 resolve 函数的执行，延迟到 test 里面的 Promise 的状态为 onFulfilled 的时候再执行，那么链式就可以继续了。所以，当 resolve 入参为 Promise 的时候，调用其 then 方法为其注入回调函数，而注入的是前一个 Promise 的 resolve 方法，所以要用 call 来绑定 this 的指向。
基于新的 Promise 模型，上面的执行过程产生的 Promise 实例及其回调函数，可以用看下表：
有了这个表格，我们就可以清晰知道各个实例中 callback 执行的顺序是：
c1 -> p2resolve -> c2 -> p3resolve -> [] -> p5resolve -> []
以上就是链式调用的原理了。
reject
下面我们再来补全 reject 的逻辑。只需要在注册回调、状态改变时加上 reject 的逻辑即可。
完整代码如下:
异常处理
异常通常是指在执行成功/失败回调时代码出错产生的错误，对于这类异常，我们使用 try-catch 来捕获错误，并将 Promise 设为 rejected 状态即可。
handle代码改造如下：
我们实际使用时，常习惯注册 catch 方法来处理错误，例：
实际上，错误也好，异常也罢，最终都是通过reject实现的。也就是说可以通过 then 中的错误回调来处理。所以我们可以增加这样的一个 catch 方法：
Finally方法
在实际应用的时候，我们很容易会碰到这样的场景，不管Promise最后的状态如何，都要执行一些最后的操作。我们把这些操作放到 finally 中，也就是说 finally 注册的函数是与 Promise 的状态无关的，不依赖 Promise 的执行结果。所以我们可以这样写 finally 的逻辑：
resolve 方法和 reject 方法
实际应用中，我们可以使用 Promise.resolve 和 Promise.reject 方法，用于将于将非 Promise 实例包装为 Promise 实例。如下例子：
这些情况下，Promise.resolve 的入参可能有以下几种情况：
基于以上几点，我们可以实现一个 Promise.resolve 方法如下：
Promise.reject与Promise.resolve类似，区别在于Promise.reject始终返回一个状态的rejected的Promise实例，而Promise.resolve的参数如果是一个Promise实例的话，返回的是参数对应的Promise实例，所以状态不一 定。
因此，reject 的实现就简单多了，如下：
Promise.all
入参是一个 Promise 的实例数组，然后注册一个 then 方法，然后是数组中的 Promise 实例的状态都转为 fulfilled 之后则执行 then 方法。这里主要就是一个计数逻辑，每当一个 Promise 的状态变为 fulfilled 之后就保存该实例返回的数据，然后将计数减一，当计数器变为 0 时，代表数组中所有 Promise 实例都执行完毕。
Promise.race
有了 Promise.all 的理解，Promise.race 理解起来就更容易了。它的入参也是一个 Promise 实例数组，然后其 then 注册的回调方法是数组中的某一个 Promise 的状态变为 fulfilled 的时候就执行。因为 Promise 的状态只能改变一次，那么我们只需要把 Promise.race 中产生的 Promise 对象的 resolve 方法，注入到数组中的每一个 Promise 实例中的回调函数中即可。
总结
Promise 源码不过几百行，我们可以从执行结果出发，分析每一步的执行过程，然后思考其作用即可。其中最关键的点就是要理解 then 函数是负责注册回调的，真正的执行是在 Promise 的状态被改变之后。而当 resolve 的入参是一个 Promise 时，要想链式调用起来，就必须调用其 then 方法(then.call),将上一个 Promise 的 resolve 方法注入其回调数组中。
补充说明
虽然 then 普遍认为是微任务。但是浏览器没办法模拟微任务，目前要么用 setImmediate ，这个也是宏任务，且不兼容的情况下还是用 setTimeout 打底的。还有，promise 的 polyfill (es6-promise) 里用的也是 setTimeout。因此这里就直接用 setTimeout,以宏任务来代替微任务了。
参考资料
完整 Promise 模型
最后
觉得内容有帮助可以关注下我的公众号 「前端Q」，一起学习成长～～
The text was updated successfully, but these errors were encountered: