前端-手写代码系列-promise

1.promise解决的问题

为了达到同步逻辑的效果，避免回调地狱，提高代码的可读性

2.什么场景会用到promise

异步获取数据，并对返回的数据进行处理，在进行下一步的逻辑操作

3.需要promise满足的条件

1. promise的返回状态，两种情况：成功或失败，需要分别对两种状态进行处理
2. promise返回的失败状态，可由then处理，也可由catch处理，需要兼容两种方式
3. 由于异步获取数据，涉及代码的异步执行（怎样保存上下文？）

4.实现思路：

function promiseCase(constructor) {

    let self = this;
    // 用于保存状态结果
    self.status = 'pending';
    self.value = undefined;
    self.error = undefined;
    // 用于保存异步上下文
    self.onFullfilledCallback = [];
    self.onRejectedCallback = [];
    var resolve = (value) => {
        debugger
        if (self.status === 'pending') {
            debugger
            self.value = value;
            self.status = 'resolved';
            console.log(self.onFullfilledCallback, 'self.onFullfilledCallback');
            self.onFullfilledCallback.forEach(fn => {
                debugger
                console.log(fn, 'fn');
                fn()
            });
            self.onRejectedCallback.forEach(fn => {
                debugger
                console.log(fn, 'fn');
                fn()
            });
        }
    }
    var reject = (error) => {
        if (self.status === 'pending') {
            self.reason = error;
            self.status = 'rejected';
            self.onRejectedCallback.forEach(fn => fn());
        }
    }
    self.then = function (onFullfilled, onRejected) {
        debugger
        let self = this;
        switch (self.status) {
            case 'resolved':
                onFullfilled(self.value);
                break;
            case 'rejected':
            	// onRjected可能不存在
                if (onRejected) {
                    onRejected(self.reason);
                    return;
                }
                break;
            case 'pending':
            	// 异步执行保存状态
                self.onFullfilledCallback.push(() => onFullfilled(self.value));
                if (onRejected) {
                    self.onRejectedCallback.push(() => onRejected(self.reason));
                    return;
                }
                break;
            default:
        };
        return self;
    }
    self.catch = function (onRejected) {
        self.then(()=>{},onRejected);
    }
    try {
        constructor(resolve, reject);
    } catch (e) {
        reject(e);
    }

}

5.调用方式（可通过debugger方式跟踪执行过程）

var p = new promiseCase(function (resolve, reject) {
	//测试异步案例
    setTimeout(() => {
        debugger
        console.log(resolve);
        reject('失败');
    }, 1000);//
    // console.log(p,resolve);
    // debugger
    // resolve('成功');
})
// p.then(function (x){
// then存在两个参数
//     console.log(x);
// },function (error){
//     console.log('error');
// })
// p.then(function (x) {
//     debugger
//     console.log(x);
// }).catch(function (error) {
// 使用catch处理异常
//     debugger
//     console.log(error);
// });
p.then(function (x) {
    debugger
    console.log(x);
},function (x){
    console.log(x,'fail');
})
// console.log(p);