Promise.all方法实现
//先来看使用方法
function p1() {
return new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve('p1')
},1000)
})
}
function p2() {
return new Promise((resolve, reject)=>{
resolve('p2')
})
}
Promise.all(['a', 'b', p1(), p2()]).then(result=>{
console.log(result)
})
// 一秒中后输出 ["a", "b", "p1", "p2"]
// promise.all是用来解决异步并发问题的，它允许我们按照异步代码调用的顺序，得到异步代码执行的结果
// 入参是个数组，数组中的每一项既可以是普通值，也可以是promise
// all返回的函是个promise对象，所以可以在后面继续.then
// 都成功才返回成功，有一个失败就返回失败
static all(arr) {
return new MyPromise((resolve, reject)=>{
let result = [];
let index = 0; // 计数
for(let i = 0; i < arr.length; i++) {
let current = arr[i];
if(current instanceof MyPromise) {
current.then(value => { // 通过then拿到value
addData(i, value);
}, reson => reject(reson)); // 有一次失败直接reject
}else{
addData(i, current);
}
}
function addData (key, value) {
result[key] = value;
// 这里的逻辑是因为for循环是一瞬间就执行完的，current.then()是异步操作，需要等待，不能直接就resolve()
// 所以就记个数，等then都回来了，才resolve
index++;
if (index === arr.length) {
resolve(result);
}
}
})
}
Promise.resolve方法实现
function p1() {
return new Promise((resolve, reject)=>{
resolve('hello');
});
}
Promise.resolve(10).then(v=>{
console.log(v); // => 10
});
Promise.resolve(p1()).then(v=>{
console.log(v); // => 'hello'
});
// Promise.resolve的作用是将给定的值转化成对象
// 能后续.then说明返回的是promise对象
// 在返回的对象中，会包裹我们给定的值
// 这个很简单
static resolve (value) {
if (value instanceof MyPromise) return value; // 如果是Promise 直接返回
return new MyPromise(resolve => resolve(value));
}
Promise.finally方法实现
let promise = new Promise((resolve, reject)=>{
resolve('hi');
})
promise.finally(()=>{
console.log("finally")
}).then((v)=>{
console.log(v)
})
// 无论当前promise的执行结果是成功还是失败，都会调用finally方法
// finally方法会返回promise，且会传递promise执行结果
// 依旧简单
finally (callback) {
return this.then(value => { // 直接调用then获得上一个promise的执行结果
return MyPromise.resolve(callback()).then(() => value);
}, reason => {
return MyPromise.resolve(callback()).then(() => { throw reason })
})
}
catch方法实现
let promise = new Promise((resolve, reject)=>{
reject('hi2');
})
promise.then((v)=>{
console.log(v)
}).catch((e)=>{
console.log(e)
})
// catch是用来处理当前promise处理失败的情况
// 如果then方法不传第二个失败回调的话，就会进入catch方法
// 方法也很简单，就是使用then方法，只注册失败回调
catch(callback) {
return this.then(undefined, callback);
}
整体代码
promise代码已手写完毕，整体代码如下
class MyPromise {
constructor(executor) {
try {
executor(this.resolve, this.reject);
} catch (e) {
this.reject(e);
}
}
status = 'pending'
value = undefined
reason = undefined
successCallback = []
failCallback = []
resolve = (value)=>{
if(this.status !== 'pending') {
return;
}
this.status = 'fulfilled';
this.value = value;
while(this.successCallback.length) {
this.successCallback.shift()();
}
}
reject = (reason)=>{
if(this.status !== 'pending') {
return;
}
this.status = 'rejected';
this.reason = reason;
while(this.failCallback.length) {
this.failCallback.shift()();
}
}
then (successCallback, failCallback) {
successCallback = successCallback ? successCallback : (v) => v;
failCallback = failCallback ? failCallback : (reason) => {
throw reason;
};
let x;
let promise2 = new MyPromise((resolve, reject)=>{
if(this.status === 'fulfilled') {
try {
x = successCallback(this.value);
this.resolvePromise(x, resolve, reject);
} catch (e) {
this.reject(e);
}
} else if (this.status === 'rejected') {
try {
x = failCallback(this.reason);
this.resolvePromise(x, resolve, reject);
} catch (e) {
this.reject(e);
}
} else {
this.successCallback.push(()=>{
try {
x = successCallback(this.value);
this.resolvePromise(x, resolve, reject);
} catch (e) {
this.reject(e);
}
});
this.failCallback.push(()=>{
try {
x = failCallback(this.reason);
this.resolvePromise(x, resolve, reject);
} catch (e) {
this.reject(e);
}
});
}
});
return promise2;
}
resolvePromise(x, resolve, reject) {
if(x instanceof MyPromise) {
x.then((value)=>{
resolve(value);
}, (reason)=>{
reject(reason);
});
} else {
resolve(x);
}
}
static all(arr) {
return new MyPromise((resolve, reject)=>{
let result = [];
let index = 0;
for(let i = 0; i < arr.length; i++) {
let current = arr[i];
if(current instanceof MyPromise) {
current.then(value => {
addData(i, value);
}, reason => reject(reason));
}else{
addData(i, current);
}
}
function addData (key, value) {
result[key] = value;
index++;
if (index === arr.length) {
resolve(result);
}
}
});
}
static resolve (value) {
if (value instanceof MyPromise) return value;
return new MyPromise(resolve => resolve(value));
}
finally(callback) {
return this.then(value => {
return MyPromise.resolve(callback()).then(() => value);
}, reason => {
return MyPromise.resolve(callback()).then(() => { throw reason })
});
}
catch(callback) {
return this.then(undefined, callback);
}
}
网友评论