文章目录
///
/1. MyPromise构造函数///
//
/**
* @param func 是一个函数。
* 使用例子:
* let myPromise = new MyPromise((res,rej) = >{
* // 这里面可以包含异步操作
* setTimeOut(()=>{
* res({id:1,name:'beaster'})
* },3000)
* })
* 这里res与rej就是MyPromise构造函数里面的两个函数。
*/
function MyPromise(func) {
// 避免this指向不明
let self = this;
// myPromise运行之后的值
self.value = null;
// myPromise的状态,pending,fullfill,reject。初始化为pending
self.status = 'pending';
// 如果myPromise的状态还是pending时,就调用了then,then的参数(是一个函数)是不会立即执行的,所以需要先保存起来
self.onfullfill = [];
// 如果myPromise的状态还是pending时,就调用了then,then的参数(是一个函数)是不会立即执行的,所以需要先保存起来
self.onreject = [];
/**
* 修改myPromise的状态为fullfill
*/
function resolve(value) {
self.value = value;
self.status = 'fullfill';
/* 指向self.onfullfill与self.onreject中的方法 */
self.onfullfill.forEach((onfullfill) => {
onfullfill(self.value);
})
}
/**
* 修改myPromise的状态为reject
*/
function reject(reason) {
self.value = reason;
self.status = 'reject';
self.onreject.forEach((onreject) => {
onreject(self.value);
})
}
// 将resolve,reject传递给异步操作,让异步操作改变promise的状态与value
func(resolve, reject);
}
///
/2. MyPromise的then方法/
///
/**
* @param onfullfill 当myPromise状态fullfill时调用的函数
* @param onreject 当myPromise状态为reject时调用的函数
* 使用例子:
* myPromise.then((value)=> {
* console.log(value)
* },(value)=>{
* console.log(value)
* })
*/
MyPromise.prototype.then = function (onfullfill, onreject) {
let self = this;
/* 将onfullfill,onreject保存起来 */
if (self.status == 'pending') {
self.onfullfill.push(onfullfill);
self.onreject.push(onreject);
}
if (self.status == 'fullfill') {
onfullfill(self.value);
}
if (self.status == 'reject') {
onreject(self.value);
}
}
///
/2.1 MyPromise的then方法进阶(这里我们姑且把then方法取另外一个名字then1与上面的then方法区分开)///
/Promise的then方法是可以链式调用的
///
MyPromise.prototype.then1 = function (onfullfill, onreject) {
let self = this;
/*then1方法中两个回调函数可以是可选参数 */
onfullfill = typeof onfullfill == 'function' ? onfullfill : val => val
onreject = typeof onreject == 'function' ? onreject : val => val
// Promise的then方法返回的是一个Promise对象。所以我们返回promise2(这个promse2是立即执行的)
let promise2 = new MyPromise((resolve, reject) => {
/* 将onfullfill,onreject保存起来 */
if (self.status == 'pending') {
self.onfullfill.push(onfullfill);
self.onreject.push(onreject);
}
if (self.status == 'fullfill') {
/*promise变成异步的 */
setTimeout(() => {
let x = onfullfill(self.value);
resolvePromise(x, promise2, resolve, reject)
}, 0);
}
if (self.status == 'reject') {
/*promise变成异步的 */
setTimeout(() => {
let x = onreject(self.value);
resolvePromise(x, promise2, resolve, reject)
}, 0);
}
})
/**
* 处理onfullfill,onreject的返回值。如果是一个基本类型,那么直接修改promise2的状态。如果是一个对象,就把它当成一个MyPromise,等它的异步操作完成之后,才改变promise2的状态
* @param {*} x 当前promise执行结束返回的值
* @param {*} promise2
* @param {*} resolve 用来改变promise2的状态
* @param {*} reject 用来改变promise2的状态
*
*/
function resolvePromise(x, promise2, resolve, reject) {
/*避免promise2,等于x,造成循环引用 */
if (x === promise2) {
reject(new Error('循环引用'));
}
/**是一个对象时 */
if (x != null && (typeof x == 'object' || typeof x == 'function')) {
if (x instanceof MyPromise) {
x.then1(res => {
// 递归调用,改变promise2的状态
resolePromise(res, resolve, reject);
}, rej => {
// 递归调用,改变promise2的状态
resolePromise(rej, resolve, reject)
})
} else {
reject('返回值必须为基本类型或者MyPromise')
}
} else {// 是一个基本类型
resolve(x);
}
}
return promise2;
}
///
/3. 扩展方法:promise有一个catch方法,reject,resole方法。所以MyPromise也有
///
MyPromise.prototype.catch = function (onrejected) {
return this.then1(null, onrejected)
}
MyPromise.reject = function (reason) {
return new MyPromise((resolve, reject) => {
reject(reason)
})
}
MyPromise.resolve = function (value) {
return new MyPromise((resolve, reject) => {
resolve(value);
})
}