手写promise
const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';
const resolvePromise = (promise2, x, resolve, reject) => {
if (promise2 === x) {
return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
}
let called;
if ((typeof x === 'object' && x != null) || typeof x === 'function') {
try {
let then = x.then;
if (typeof then === 'function') {
then.call(x, y => {
if (called) return;
called = true;
resolvePromise(promise2, y, resolve, reject);
}, r => {
if (called) return;
called = true;
reject(r);
});
} else {
resolve(x);
}
} catch (e) {
if (called) return;
called = true;
reject(e)
}
} else {
resolve(x)
}
}
class Promise {
constructor(executor) {
this.status = PENDING;
this.value = undefined;
this.reason = undefined;
this.onResolvedCallbacks = [];
this.onRejectedCallbacks= [];
let resolve = (value) => {
if(value instanceof Promise){
return value.then(resolve,reject)
}
if(this.status === PENDING) {
this.status = FULFILLED;
this.value = value;
this.onResolvedCallbacks.forEach(fn=>fn());
}
}
let reject = (reason) => {
if(this.status === PENDING) {
this.status = REJECTED;
this.reason = reason;
this.onRejectedCallbacks.forEach(fn=>fn());
}
}
try {
executor(resolve,reject)
} catch (error) {
reject(error)
}
}
then(onFulfilled, onRejected) {
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v;
onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
let promise2 = new Promise((resolve, reject) => {
if (this.status === FULFILLED) {
setTimeout(() => {
try {
let x = onFulfilled(this.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e)
}
}, 0);
}
if (this.status === REJECTED) {
setTimeout(() => {
try {
let x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e)
}
}, 0);
}
if (this.status === PENDING) {
this.onResolvedCallbacks.push(() => {
setTimeout(() => {
try {
let x = onFulfilled(this.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e)
}
}, 0);
});
this.onRejectedCallbacks.push(()=> {
setTimeout(() => {
try {
let x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0);
});
}
});
return promise2;
}
catch(errCallback) {
return this.then(null,errCallback)
}
finally(callback) {
return this.then((value)=>{
return Promise.resolve(callback()).then(()=>value)
},(reason)=>{
return Promise.resolve(callback()).then(()=>{throw reason})
})
}
static resolve(data){
return new Promise((resolve,reject)=>{
resolve(data);
})
}
static reject(reason){
return new Promise((resolve,reject)=>{
reject(reason);
})
}
static all(values) {
if (!Array.isArray(values)) {
const type = typeof values;
return new TypeError(`TypeError: ${type} ${values} is not iterable`)
}
return new Promise((resolve, reject) => {
let resultArr = [];
let orderIndex = 0;
const processResultByKey = (value, index) => {
resultArr[index] = value;
if (++orderIndex === values.length) {
resolve(resultArr)
}
}
for (let i = 0; i < values.length; i++) {
let value = values[i];
if (value && typeof value.then === 'function') {
value.then((value) => {
processResultByKey(value, i);
}, reject);
} else {
processResultByKey(value, i);
}
}
});
}
static race(promises) {
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; i++) {
let val = promises[i];
if (val && typeof val.then === 'function') {
val.then(resolve, reject);
} else {
resolve(val)
}
}
});
}
}
Promise.defer = Promise.deferred = function () {
let dtd = {}
dtd.promise = new Promise((resolve, reject) => {
dtd.resolve = resolve;
dtd.reject = reject;
})
return dtd;
}
module.exports = Promise
参考资料
手写promise.all()
原理分析
- Promise.all：入参是一个 promise 集合；返回一个 Promise 实例；
- 所有 promise 的 resolve 回调结果都会被放入到一个数组；
- 所有 promise 都执行成功且调用 resolve 后，返回的 Promise 才调用 resolve 成功，并返回全部执行结果；
- 任何一个 promise 执行调用 reject 或抛出错误，返回的 Promise 就会调用 reject 失败，并返回第一个失败结果；
代码实现
// Promise.all 处理 promise 集合
static all (promises) {
// Promise.all 返回一个 Promise
return new Promise((resolve, reject)=>{
// 创建集合 result，用于顺序存放 Promise 执行结果
// 全部执行成功，调用 resolve(result)，返回全部执行结果
let result = [];
// 遍历执行 每一个 promises
for(let i = 0;i < promises.length; i++){
let p = promises[i];
// promise 类型，promise.then
if(p && typeof p.then ==='function'){
p.then((data)=>{
// todo 执行结果放入 result
}, reject) // 任何一个 promise 失败，直接失败
// 非 promise 类型
}else{
// todo
}
}
})
}
还有以下关键问题需要解决：
1：如何按照执行顺序存放异步操作的返回结果？
按照异步操作执行顺序，放入 result 数字下标的对应位置；
2：如何判定集合内的 promise 已经全部执行完成？
如果使用 result.length，后面异步操作如果先返回放入数组，判断 length 就不准了；
可以使用计数器，每次 promise 成功 index++，直至index === promises.length;
最终代码实现如下：
static all (promises) {
if (!Array.isArray(promises)) {
const type = typeof values;
return new TypeError(`TypeError: ${type} ${values} is not iterable`)
}
return new Promise((resolve, reject)=>{
let result = [];
let times = 0;
// 将成功结果放入数组中对应的位置
const processSuccess = (index, val)=>{
result[index] = val;
if(++times === promises.length){
resolve(result); // 全部执行成功，返回 result
}
}
// 遍历处理集合中的每一个 promise
for(let i = 0;i < promises.length; i++){
let p = promises[i];
if(p && typeof p.then ==='function'){
// 调用这个p的 then 方法
p.then((data)=>{
// 按照执行顺序存放执行结果
processSuccess(i, data)
}, reject);
}else{
// 普通值，直接按照执行顺序放入数组对应位置
processSuccess(i, p)
}
}
})
}
