异步操作流程化的手段

#Promise处理异步操作

Promise，使异步操作变得流程化的手段之一，例如“异步A ——> 异步B ——> 异步C……”，Promise执行器执行完异步A之后，得到一个正确resolve（或者失败reject）的结果，然后，再执行异步B,如此类推下去。

• 了解Promise执行顺序。同步执行器executor、异步then()、Promise三种状态（pending、resolve、reject）

其一，了解Promise的基本结构、以及执行顺序，代码如下：

// excutor执行器    同步
let promise = new Promise((resolve, reject) => {
    console.log("1：excutor执行器同步执行（同步）");
    if(true) {
        resolve("4: Transfer success")
    }else {
        reject("4: Transfer fail")
    }
});

// then(resolvecallback,rejectcallback)   异步
promise.then((res) => {
    console.log("3: 从上往下执行");
    console.log(res);
    console.log("5: 从上往下执行（最后）");
},(err)=>{
    console.log("3: 从上往下执行");
    console.log(err);
    console.log("5: 从上往下执行（最后）");
});

console.log("2: 我不想最后执行（同步）");

Promise从零开始实现

• Promise主体框架：状态state、执行器executor、执行函数和回调函数

function Promise(executor) {
    // 初始化state为等待
    this.state = 'pending';
    // 成功的值
    this.value = undefined;
    // 失败的原因
    this.reason = undefined;
    // fn1存放 resolve 的回调
    this.fn1 = [];
    // fn2存放 reject 的回调
    this.fn2 = [];
    // 成功
    let resolve = () => {};
    // 失败
    let reject = () => {};
    // 立即执行
    executor(resolve, reject)
}

• 完善resolve、reject函数，以及executor捕捉错误

执行resolve、reject函数时，需要判断state是否为等待

function Promise(executor) {
    // 初始化state为等待
    this.state = 'pending';
    // 成功的值
    this.value = undefined;
    // 失败的原因
    this.reason = undefined;
    // fn1存放 resolve 的回调
    this.fn1 = [];
    // fn2存放 reject 的回调
    this.fn2 = [];
    // 成功
    let resolve = value => {
        if('pending' === this.state) {
            this.state = 'resolved',
            this.value = value;
        }
    };
    // 失败
    let reject = err => {
        if('pending' === this.state) {
            this.state = 'rejected',
            this.reason = err;
        }
    };
    // 立即执行
    // 如果executor执行报错，那么，直接执行reject
    try{
        executor(resolve, reject)
    }catch(err) {
        reject(err)
    }
}