源码 https://github.com/webabcd/TypeScriptDemo
作者 webabcd

兼收并蓄 TypeScript - 进阶: promise

示例如下:

advanced\promise.ts

{
    /**
     * Promise - 用于异步编程（非多线程）
     *   有 3 种状态： pending（进行中），fulfilled（已成功），rejected（已失败）
     *   状态只能从 pending 变为 fulfilled 或者从 pending 变为 rejected，且变成 fulfilled 或 rejected 之后这个 Promise 对象就不能再变了
     */

    const promise = new Promise((resolve, reject) => {
        let success = new Date().getTime() % 2 == 0;
        if (success) {
            // 从 pending 变为 fulfilled
            resolve("pending to fulfilled");
        } else {
            // 从 pending 变为 rejected
            reject("pending to rejected");
        }

        // 状态变为 fulfilled 或 rejected 之后就不能再变了，所以下面这两句都是没用的
        resolve("aaaaaaaaaa");
        reject("bbbbbbbbbb");
    });

    // then() - promise 的状态变为 fulfilled 或 rejected 之后的回调
    //   第 1 个参数指定的函数用于接收 fulfilled 状态的回调
    //   第 2 个参数指定的函数用于接收 rejected 状态的回调
    promise.then(function(value) {
        console.log('a:' + value) // a:pending to fulfilled
    }, function(error) {
        console.log('b:' + error) // b:pending to rejected
    });
    // 返回结果为 fulfilled 或 rejected

    // 如果有多个 then() 则都会收到回调
    // 如果 then() 的时候，promise 没有完成，则在 promise 完成的时候会收到回调
    // 如果在 then() 之前 promise 就完成了，则 then() 的时候马上会收到回调
    promise.then(function(value) {
        console.log('c:' + value) // c:pending to fulfilled
    }, function(error) {
        console.log('d:' + error) // d:pending to rejected
    });
    // 返回结果为 fulfilled 或 rejected


    // Promise.resolve() - 将指定的对象转换为 fulfilled 状态的 Promise 对象并返回
    // Promise.resolve("abc") 等价于 new Promise(resolve => resolve('abc'))
    Promise.resolve("abc").then((value) => { console.log(value)} ); // abc
    // Promise.reject() - 将指定的对象转换为 rejected 状态的 Promise 对象并返回
    // Promise.reject('xyz') 等价于 new Promise((resolve, reject) => reject("xyz"))
    Promise.reject('xyz').then(null, (value) => { console.log(value) }); // xyz


    // then() 是支持链式调用的（即每次 then() 都通过返回 Promise 对象来支持链式调用）
    new Promise(resolve => {
        resolve("a");
    }).then(value => {
        console.log(value); // a
        // 因为 then() 返回的是 Promise 对象，如果你 return 一个非 Promise 对象的话，则会自动将其变为 Promise 对象
        // 此例实际返回的是 Promise.resolve("b")
        return "b";
    }).then(value => {
        console.log(value); // b
        return Promise.reject("c");
    }).then(null, value => {
        console.log(value); // c
    });


    // 通过 Promise.all() 并发执行多个 Promise 对象
    const p1 = new Promise((resolve, reject) => {
        console.log('p1 start');
        setTimeout(() => {
            console.log('p1 end');
            resolve("fulfilled 1");
        }, 100);
    });
    const p2 = "fulfilled 2"; // 被 Promise.all() 包装时，会转换为 Promise.resolve("fulfilled 2")
    const p3 = new Promise((resolve, reject) => {
        console.log('p3 start');
        setTimeout(() => {
            console.log('p3 end');
            let success = new Date().getTime() % 2 == 0;
            if (success) {
                resolve("fulfilled 3");
            } else {
                reject("rejected 3");
            }
        }, 100);

    });
    // Promise.all() - 将多个 Promise 对象包装成一个新的 Promise 对象，并返回这个新的 Promise 对象
    // Promise.all() 内的所有 Promise 对象是并行执行的
    // 如果所有 Promise 对象全部变为 fulfilled 状态，则新的 Promise 对象变为 fulfilled 状态，返回结果为一个数组，其按对应的索引位置保存每个 Promise 对象的结果
    // 如果有一个 Promise 对象变为 rejected 状态，则新的 Promise 对象变为 rejected 状态
    Promise.all([p1, p2, p3]).then(values => {
        console.log(values); // ["fulfilled 1", "fulfilled 2", "fulfilled 3"]
    }, error => {
        console.log(error) // rejected 3
    });
    // 返回结果为 ["fulfilled 1", "fulfilled 2", "fulfilled 3"] 或 rejected 3


    const p4 = new Promise((resolve, reject) => {
        setTimeout(() => { resolve("fulfilled 4"); }, 100);
    });
    const p5 = "fulfilled 5"; // 被 Promise.race() 包装时，会转换为 Promise.resolve("fulfilled 5")
    const p6 = Promise.reject("rejected 6");
    // Promise.race() - 将多个 Promise 对象包装成一个新的 Promise 对象，并返回这个新的 Promise 对象
    // Promise.race() 内的所有 Promise 对象是并行执行的
    // 这个新的 Promise 对象返回的状态和值是多个 Promise 对象中最先完成的那个 Promise 的状态和值
    Promise.race([p4, p5, p6]).then(value => {
        console.log(value); // fulfilled 5
    }, error => {
        console.log(error) // rejected 6
    });
    // 返回结果为 fulfilled 5


    const p7 = new Promise((resolve, reject) => {
        let x = new Date().getTime() % 3;
        if (x == 0) {
            resolve("fulfilled 7");
        } else if (x == 1) {
            reject("rejected 7");
        } else if (x == 2) {
            throw "exception 7";
        }
    });
    // catch() - 捕获 Promise 中的 throw 的异常
    p7.then(value => {
        console.log(value) // fulfilled 7
    }, error => {
        console.log(error) // rejected 7
    }).catch(exception => {
        console.log(exception) // exception 7
    });
}

// es2018 新特性
// 新增了 Promise.prototype.finally()
{
    const p8 = new Promise((resolve, reject) => {
        let x = new Date().getTime() % 3;
        if (x == 0) {
            resolve("fulfilled 8");
        } else if (x == 1) {
            reject("rejected 8");
        } else if (x == 2) {
            throw "exception 8";
        }
    });
    // catch() - 捕获 Promise 中的 throw 的异常
    // finally() - 无论 Promise 是 fulfilled 还是 rejected 还是抛出了异常，最后都会执行 finally()
    p8.then(value => {
        console.log(value) // fulfilled 8
    }, error => {
        console.log(error) // rejected 8
    }).catch(exception => {
        console.log(exception) // exception 8
    }).finally(() => {  // 这个 finally 是 es2018 新增的
        console.log("finally 8"); // finally
    });
}

// es2020 新特性
{
    const p9 = [
        Promise.resolve("p9_1_resolve"),
        Promise.reject("p9_2_reject"),
        Promise.resolve("p9_3_resolve")
    ];
    
    // allSettled() - 等待所有 Promise 都完成（无论是 fulfilled 还是 rejected），并返回一个包含所有 Promise 的状态的数组
    Promise.allSettled(p9).then(results => {
        results.forEach(result => {
            // 状态是 fulfilled 或 rejected
            if (result.status === 'fulfilled') {
                // 状态是 fulfilled 时，可以通过 value 获取 resolve 的值
                console.log(result.value); // p9_1_resolve p9_3_resolve
            } else {
                // 状态是 rejected 时，可以通过 reason 获取 reject 的值
                console.log(result.reason); // p9_2_reject
            }
        });
    });
}

源码 https://github.com/webabcd/TypeScriptDemo
作者 webabcd