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

万象更新 Html5 - es6 进阶: promise

示例如下:

es6\src\advanced\promise.js

/**
 * Promise - 用于异步编程（非多线程）
 *   有 3 种状态： pending（进行中），fulfilled（已成功），rejected（已失败）
 *   状态只能从 pending 变为 fulfilled 或者从 pending 变为 rejected，且变成 fulfilled 或 rejected 之后这个 Promise 对象就不能再变了
 *
 * 本例讲解：
 * new Promise((resolve, reject) => { }), Promise.resolve(), Promise.reject(), Promise.all(), Promise.race()
 * Promise.prototype.then(), Promise.prototype.catch(), Promise.prototype.finally()
 */

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

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

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

// 如果有多个 then() 则都会收到回调
// 如果 then() 的时候，promise 没有完成，则在 promise 完成的时候会收到回调
// 如果在 then() 之前 promise 就完成了，则 then() 的时候马上会收到回调
promise.then(function(value) {
    console.log(value)
}, function(error) {
    console.log(error)
});
// 返回结果为 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");
        }
    }, 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);
}, error => {
    console.log(error)
});
// 返回结果为 ["fulfilled 1", "fulfilled 2", "fulfilled 3"] 或 rejected


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");
// Promise.race() - 将多个 Promise 对象包装成一个新的 Promise 对象，并返回这个新的 Promise 对象
// Promise.race() 内的所有 Promise 对象是并行执行的
// 这个新的 Promise 对象返回的状态和值是多个 Promise 对象中最先完成的那个 Promise 的状态和值
Promise.race([p4, p5, p6]).then(value => {
    console.log(value);
}, error => {
    console.log(error)
});
// 返回结果为 fulfilled 5


const p7 = new Promise((resolve, reject) => {
    let x = new Date().getTime() % 3;
    if (x == 0) {
        resolve("fulfilled");
    } else if (x == 1) {
        reject("rejected");
    } else if (x == 2) {
        throw "exception";
    }
});
// catch() - 捕获 Promise 中的 throw 的异常
// finally() - 无论 Promise 是 fulfilled 还是 rejected 还是抛出了异常，最后都会执行 finally()
p7.then(value => {
    console.log(value)
}, error => {
    console.log(error)
}).catch(exception => {
    console.log(exception)
}).finally(() => {
    console.log("finally");
});
// 返回结果为 fulfilled finally 或 rejected finally 或 exception finally

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