Promise总结

一、Promise对象

       一个Promise对象就是一个异步操作，包含三个状态，pending，resolve，rejected，状态的改变只能从pending到resolve或pending到rejected（状态一旦修改就不能在改变）。在Event Loop中属于微任务。

二、实例方法：

then 调用then如果有返回值，返回的是一个新的Promise实例，隐藏可以使用链式写法，继续then下去。（then里面传递的函数会被置入一个微任务队列，当事件队列清空后才会执行）
       catch 异常捕获

三、静态方法：

        all 将多个Promise实例转换成一个Promise实例，如果不是则先调用resolve将参数转换成Promise实例，所有的状态都变成Fulfilled，才会返回给回调，但是有一个Rejected就会返回
        race 和all一样，区分在返回值，有一个状态改变，就会返回给回调。
        resolve 返回一个解析过的Promise对象。参数分几种情况，1种是参数为Promise对象，此时直接返回，如果是字符串、函数等会转换成Parmise对象且状态为Fulfilled，并且有then属性。最后有可能是一个带有then属性的对象，立即执行then

                并更改状态为Fulfilled。
        reject  将对象转成Promise对象 且状态为Rejected
        附加方法
        done   捕获最后执行可能出现的错误
        finally 最后必须执行的函数，接收参数为回调。

四、链式调用：

基于Promise实现链式调用，要求下一次的任务依赖上游的数据（rxjs concat操作符）

/**
 * 一、Promise 链式调用实现
 * @returns {Promise<any>}
 */
function fn() {
  return new Promise((resolve, reject) => {
      setTimeout(()=> {
        resolve('fn');
      }, 1000);
  });
}

function fn1(res) {
  return new Promise((resolve, reject) => {
    setTimeout(()=> {
      resolve(res)
    }, 1000);
  });
}

function fn2(res) {
  return new Promise((resolve, reject) => {
    setTimeout(()=> {
      resolve(res)
    }, 1000);
  });
}

function fn3(res) {
  return new Promise((resolve, reject) => {
    setTimeout(()=> {
      resolve(res)
    }, 1000);
  });
}

fn().then((res) => {
  console.log(res)
  return fn1(res + 1);
})
  .then((res) => {
    console.log(res)
    return fn2(res + 1);
  })
  .then((res) => {
    console.log(res)
    return fn3(res + 1);
  });


/**
 * 使用async实现
 * @returns {Promise.<void>}
 */
async function getData() {
    const upstream = await fn();
    await fn1();
    await fn2();
    // ...
}
/**
 * 使用reduce实现
 * @returns Promise<void>
 */
[fn, fn1, fn2,fn3].reduce(
		// @ts-ignore
		(prev, current) => prev.then((res) => current(res)),
		Promise.resolve(initialValue)
	)

五、API尝试实现：

function _Promise(fn) {
    const me = this;
    // 默认状态
    me.status = 'pending';
    // 保存成功数据
    me.data = null;
    //失败信息保存
    me.errData = null;
    // 成功回调 获取then里面成功的回调函数
    me.onResolveCallbacks = [];
    // 失败回调 获取then里面失败的回调函数
    me.onRejectedCallbacks = [];

    // 成功函数
    function resolve(data) {
        if (me.status === 'pending') {
            me.status = 'fulfilled';
            me.data = data;
            me.onResolveCallbacks.forEach((item) => {
                item(me.data);
            })
        }
    }

    /**
     * 失败处理函数
     * @param data
     */
    function reject(data) {
        if (me.status === 'pending') {
            me.status = 'rejected';
            me.errData = data;
            me.onRejectedCallbacks.forEach((item) => {
                item(me.errData);
            })
        }
    }

    // 执行函数
    try {
        fn(resolve, reject);
    } catch (err) {
        reject(err)
    }
}

_Promise.prototype.then = function (resolve, reject) {
    const me = this;
    const _setPromise = (_P, _resolve, _reject) => {
        // then返回值如果是_Promise类型 则执行then处理
        if (_P instanceof _Promise) {
            _P.then(_resolve, _reject)
        } else {
            _resolve(_P)
        }
    };
    // 如果状态为成功 执行resolve
    if (me.status === 'fulfilled') {
        return new _Promise((_resolve, _reject) => {
            const _P = resolve(me.data);
            // 如果then函数的返回值是个_Promise 则执行_Promise.then函数
            // 否则将执行结果返回
            _setPromise(_P, _resolve, _reject);
        });
    }
    // 如果状态为成功 执行resolve
    if (me.status === 'rejected') {
        return new _Promise((_resolve, _reject) => {
            const _P = reject(me.errData);
            _setPromise(_P, _resolve, _reject);
        });
    }
    if (me.status === 'pending') {
        return new Promise((_resolve, _reject) => {
            me.onResolveCallbacks.push(() => {
                const _P = resolve(me.data);
                _setPromise(_P, _resolve, _reject);
            });
            me.onRejectedCallbacks.push(() => {
                const _P = reject(me.errData);
                _setPromise(_P, _resolve, _reject);
            });
        });
    }
}

_Promise.prototype.catch = function (fn) {
    return this.then(null, fn);
}


_Promise.all = function (iterables) {
    return new _Promise((resolve, reject) => {
        // 数据拼接
        let data = [];
        // 便利次数
        let index = 0;
        // 范围信息次数
        let resIndex = 0;
        for (let P of iterables) {
            // 防止乱序 获取then的正确顺序
            const dataIndex = index;
            P.then((res) => {
                // 保存信息
                data[dataIndex] = res;
                resIndex++;
                if (resIndex === data.length) {
                    resolve(data);
                }
            }, (err) => {
                reject(err);
            });
            index++;
        }
        if (!index) resolve([]);
    });
};

// 测试
new _Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(2222)
    }, 1000)
}).then((res) => {
    console.log(res)
    return new _Promise((_resolve, reject) => {
        setTimeout(() => {
            _resolve(4444)
        }, 1000);
    });
}).then((res) => {
    console.log(res)
})


new _Promise((resolve, reject) => {
    resolve(2222)
}).then((res) => {
    console.log(res)
    return new _Promise((_resolve, reject) => {
        _resolve(4444)
    });
}).then((res) => {
    console.log(res)
})

_Promise.all([new _Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(2222)
    }, 1000)
}), new _Promise((resolve, reject) => {
    resolve(4444)
})]).then((res)=> {
    console.log(res)
});