加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
myPromise.js 8.00 KB
一键复制 编辑 原始数据 按行查看 历史
田人杰 提交于 2021-03-15 09:39 . feat: 项目初始化
/**
* 1.promise就是一个类 在执行这个类的时候 需要传递一个执行器进去 执行器会立即执行
* 2。Promise中有三种状态 分别为fulfilled 成功 rejected 失败 pending 等待
* pending -》fulfilled
* pending-》rejected
* 一旦状态确定不可更改
* 3.resolve和reject函数是用来更改状态的
* resolve变为fulfilled
* reject变为rejected
* 4.then方法内部根据状态调用指定函数,then方法是被定义在原型对象上
* 5.then回调成功参数表示成功值,失败返回失败原因
* 6.加入异步逻辑
* 7.promise多次调用回调函数
* 8.then链式调用(处理返回值情况,循环调用错误)
* 9.捕获错误(执行器错误, then错误,完善then)
* 10.then参数可选
* 11.实现promise.all
* 12.实现promise.resolve
* 13.实现finally
*/
const PENDING = 'pending'; // 等待
const FULFILLED = 'fulfilled'; // 成功
const REJECTED = 'rejected'; // 失败
class MyPromise {
// promise状态
status = PENDING;
// 保存成功的值
value = undefined;
// 保存失败的原因
reason = undefined;
// 成功的回调
successCallback = [];
// 失败的回调
failCallback = [];
constructor(executor) {
try{
executor(this.resolve, this.reject);
} catch (e) {
this.reject(e);
}
}
resolve = (value) => {
// 如果状态不是等待 阻止程序向下执行
if (this.status !== PENDING) return;
// 将状态变为成功
this.status = FULFILLED;
this.value = value;
// 如果有缓存的回调,执行
// this.successCallback && this.successCallback(value);
while (this.successCallback.length) {
this.successCallback.shift()();
}
};
reject = (reason) => {
// 如果状态不是等待 阻止程序向下执行
if (this.status !== PENDING) return;
// 将状态变为失败
this.status = REJECTED;
this.reason = reason;
// 如果有缓存的回调,执行
// this.failCallback && this.failCallback(reason);
while(this.failCallback.length) {
this.failCallback.shift()();
}
};
then = (successCallback, failCallback) => {
successCallback = successCallback ? successCallback : value => value;
failCallback = failCallback ? failCallback : reason => { throw reason };
// 实现链式调用
const promise2 = new MyPromise((resolve, reject) => {
// 判断状态
if (this.status === FULFILLED) {
// 异步处理,获取promise2值
setTimeout(() => {
try{
const x = successCallback(this.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e)
}
}, 0)
} else if (this.status === REJECTED) {
setTimeout(() => {
try{
const x = failCallback(this.reason);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e)
}
}, 0)
} else {
// pending状态需要缓存回调,异步执行
this.successCallback.push(() => {
setTimeout(() => {
try{
const x = successCallback(this.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e)
}
}, 0)
});
this.failCallback.push(() => {
setTimeout(() => {
try{
const x = failCallback(this.reason);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e)
}
}, 0)
});
}
});
return promise2;
};
finally = (callback) => {
return this.then((value) => {
return MyPromise.resolve(callback()).then(() => value);
}, reason => {
return MyPromise.resolve(callback()).then(() => { throw reason });
});
}
catch = (failCallback) => {
return this.then(undefined, failCallback);
}
static all(array) {
let result = [];
let index = 0;
return new MyPromise((resolve, reject) => {
// 添加数据
function addData(i, data) {
result[i] = data;
index ++;
// 全部执行完判断,为了处理异步操作
if (index === array.length) {
resolve(result);
}
}
for (let i = 0; i < array.length; i++) {
if (array[i] instanceof MyPromise) {
// all方法中是一个promise
array[i].then(value => addData(i, value), reason => reject(reason));
} else {
// all方法中是一个值
addData(i, array[i]);
}
}
});
}
static resolve(value) {
if (value instanceof MyPromise) return value;
return new MyPromise(resolve => resolve(value));
}
}
const resolvePromise = (promise2, x, resolve, reject) => {
if (promise2 === x) {
// 出现promise循环引用
return reject(new TypeError('.......'));
}
if (x instanceof MyPromise) {
// then返回值是一个promise的时候链式传递
x.then(resolve, reject);
} else {
// 一个普通值直接返回
resolve(x);
}
};
// test1
// const promise = new MyPromise((resolve, reject) => {
// // resolve('success');
// reject('err');
// }).then(value => {
// console.log(value);
// }, reason => {
// console.log(reason);
// });
// test2
// const promise = new MyPromise((resolve, reject) => {
// setTimeout(() => {
// resolve('success');
// }, 2000);
// }).then(value => {
// console.log(value);
// }, reason => {
// console.log(reason);
// });
// test 3
// const promise = new MyPromise((resolve, reject) => {
// // resolve('success');
// setTimeout(() => {
// reject('error');
// }, 1000)
//
// // reject('error');
// });
//
// promise.then((value) => {
// console.log(1, value);
// }, reason => {
// console.log(1, reason);
// });
//
//
// promise.then((value) => {
// console.log(2, value);
// }, reason => {
// console.log(2, reason);
// });
//
//
// promise.then((value) => {
// console.log(3, value);
// }, reason => {
// console.log(3, reason);
// });
// test4
// const promise1 = new MyPromise((resolve, reject) => {
// resolve('success');
// });
//
// const promise2 = promise1.then((value) => {
// console.log(value);
// // return new MyPromise((resolve) => {
// // console.log('promise inner');
// // resolve('success2');
// // }).then(value => {
// // console.log(value);
// // });
//
// return promise2;
// });
//
// promise2.then(value => {
// console.log(value);
// }, reason => {
// console.log(reason);
// });
// test
// function p1() {
// return new MyPromise((resolve, reject) => {
// setTimeout(() => {
// resolve(1);
// });
// });
// }
//
// function p2() {
// return new MyPromise((resolve, reject) => {
// resolve(2);
// });
// }
// MyPromise.all([1, 2, p1(), p2(), 3]).then(result => console.log(result));
// new MyPromise((resolve, reject) => {
// reject(new MyPromise(() => {
// console.log(1111);
// }));
// })
// new Promise((resolve, reject) => {
// reject(new Promise(() => {
// console.log(111);
// }));
// })
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化