深刻理解ES6笔记（十一）Promise与异步编程

主要知识点：Promise生命周期、Promise基本操做、Promise链、响应多个Promise以及集成Promise

《深刻理解ES6》笔记 目录

异步编程

JavaScript引擎中，只有一个主线程，当执行JavaScript代码块时，不容许其余代码块执行，而事件机制和回调机制的代码块会被添加到任务队列（或者叫作堆栈）中，当符合某个触发回调或者事件的时候，就会执行该事件或者回调函数。

事件模型

浏览器初次渲染DOM的时候，咱们会给一些DOM绑定事件函数，只有当触发了这些DOM事件函数，才会执行他们：

let button = document.getElementById("my-btn");
button.onclick = function(event) {
    console.log("Clicked");
};

回调模式

当 Node.js 被建立时，它经过普及回调函数编程模式提高了异步编程模型。回调函数模式相似于事件模型，由于异步代码也会在后面的一个时间点才执行：

readFile("example.txt", function(err, contents) {
    if (err) {
        throw err;
    }
    console.log(contents);
});
console.log("Hi!");

若是回调过多，会陷入回调地狱；

Promise 基础

Promise能够当作是一个占位符，表示异步操做的执行结果。函数能够返回一个Promise，而没必要订阅一个事件或者向函数传递一个回调函数。

// readFile 承诺会在未来某个时间点完成
let promise = readFile("example.txt");

在此代码中， readFile() 实际上并未当即开始读取文件，这将会在稍后发生。此函数反而会返回一个 Promise 对象以表示异步读取操做，所以你能够在未来再操做它。

Promise 的生命周期

Promise的生命周期：进行中（pending），已经完成（fulfilled），拒绝（rejected）
每一个 Promise 都会经历一个短暂的生命周期，初始为挂起状态（pending state） ，这表示异步操做还没有结束。一个挂起的 Promise 也被认为是未决的（unsettled )。一旦异步操做结束， Promise就会被认为是已决的（settled ） ，并进入两种可能状态之一：

1. 已完成（fulfilled ） ： Promise 的异步操做已成功结束；
2. 已拒绝（rejected ） ： Promise 的异步操做未成功结束，多是一个错误，或由其余缘由致使。

内部的[[PromiseState]] 属性会被设置为"pending" 、 "fulfilled" 或 "rejected"，以反映Promise的状态。该属性并未在 Promise 对象上被暴露出来，所以你没法以编程方式判断 Promise 到底处于哪一种状态。不过你可使用then()方法在 Promise 的状态改变时执行一些特定操做。

• then()

then() 方法在全部的 Promise 上都存在，而且接受两个参数。第一个参数是 Promise 被完成时要调用的函数，与异步操做关联的任何附加数据都会被传入这个完成函数。第二个参数则是 Promise 被拒绝时要调用的函数:

let promise = readFile("example.txt");
promise.then(function(contents) {
    // 完成
    console.log(contents);
}, function(err) {
    // 拒绝
    console.error(err.message);
});
promise.then(function(contents) {
    // 完成
    console.log(contents);
});
promise.then(null, function(err) {
    // 拒绝
    console.error(err.message);
});

• catch() 方法

其行为等同于只传递拒绝处理函数给 then()

promise.catch(function(err) {
    // 拒绝
    console.error(err.message);
});
// 等同于：
promise.then(null, function(err) {
    // 拒绝
    console.error(err.message);
});

建立未决的 Promise

Promise 使用 Promise 构造器来建立:

// Node.js 范例
let fs = require("fs");
function readFile(filename) {
    return new Promise(function(resolve, reject) {
        // 触发异步操做
        fs.readFile(filename, { encoding: "utf8" }, function(err, contents) {
            // 检查错误
            if (err) {
                reject(err);
                return;
            }
            // 读取成功
            resolve(contents);
        });
    });
}
let promise = readFile("example.txt");
// 同时监听完成与拒绝
promise.then(function(contents) {
    // 完成
    console.log(contents);
}, function(err) {
    // 拒绝
    console.error(err.message);
});

romise构造函数接受一个函数做为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用本身部署。
执行器会在 readFile() 被调用时当即运行

let promise = new Promise(function(resolve, reject) {
    console.log("Promise");
    resolve();
});
console.log("Hi!");

//输出结果
Promise
Hi!

建立已决的 Promise

Promise.resolve()

Promise.resolve()方法接收一个参数，并会返回一个处于已完成状态的 Promise ，在then()方法中使用完成处理函数才能提取该完成态的Promise传递的值，例如：

let promise = Promise.resolve(42);
promise.then(function(value) {
    console.log(value); // 42
});

Promise.reject()

可使用Promise.reject()方法来建立一个已拒绝状态的Promise，一样只有在拒绝处理函数中或者catch()方法中才能接受reject()方法传递的值：

let promise = Promise.reject(42);
promise.catch(function(value) {
    console.log(value); // 42
});