JavaScript 异步操作之 Promise

由于 JavaScript 通常是由单线程来执行代码，所以在编写 JavaScript 代码时经常需要使用异步操作来提高程序性能。一般来说异步执行在 JavaScript 中使用 回调函数 的形式来实现。不过近年来由于社区的推动，Promise 已经成为 JavaScript 异步编程的一个标准，使用 Promise 进行异步编程，代码的可维护性将有很大提升，尤其是使用 Promise 取代多层 回调函数 嵌套的问题。

Promise 简介

下面是构造一个最简单的 Promise 代码示例：

// 构造 Promise
const promise = new Promise(function (resolve, reject) {
   
    // 异步操作代码
    if (异步操作成功) {
   
        resolve(this.response);
    } else {
   
        reject(this.status);
    }
});

// promise 状态改变时的回调
promise.then(function (res) {
   
    console.log(res);  // 执行成功回调
}, function (error) {
   
    console.log(error);  // 执行失败回调
})

Promise 是 JavaScript 提供的一个对象，可以通过 new 关键字构造这个对象。Promise 构造函数接收一个函数作为参数，该函数接收另外两个函数作为参数，分别是 resolve、reject，这两个函数由 JavaScript 引擎自身提供，无需我们手动创建。

Promise 对象有三种状态，分别是：pending(进行中)、fulfilled(已成功)、rejected(已失败)。有两种状态改变，一种是从 pending 变为 fulfilled，另一种是从 pending 变为 rejected，一旦状态改变，状态就会凝固，无法被再次更改。而 resolve 的作用就是将 Promise 对象的状态从 pending 变为 fulfilled，reject 的作用是将 Promise 对象的状态从 pending 变为 rejected。

通常我们在传递给 Promise 构造函数的函数顶部编写一些异步代码，例如一个 AJAX 请求，然后当异步代码执行成功的时候，调用 resolve，resolve 是一个函数，它能够接收参数，所以我们调用它时可以将异步代码的执行结果传递给它，此时 resolve 函数有两个作用，一是改变 Promise 的状态为 fulfilled，二是它能够将传递进去的参数传递到 promise 实例的 then 方法的第一个回调函数中，待后续操作使用。异步代码执行失败时调用 reject 函数，此时 reject 函数同样有两个作用，一是改变 Promise 的状态为 rejected，二是将传递进去的参数传递到 promise 实例的 then 方法的第二个回调函数中。

当 Promise 状态一旦改变，我们就可以通过 Promise 对象的实例（promise 变量）的 then 方法获取到异步操作的结果。then 方法接收两个回调函数作为参数，第一个回调函数会在 Promise 状态变为 fulfilled 的时候自动调用，第二个回调函数会在 Promise 状态变为 rejected 的时候自动调用。这两个回调函数分别接收一个参数，第一个回调函数接收到的 res 参数实际上就是我们在 Promise 内部异步代码执行成功时传递给 resolve 的参数，第二个回调函数接收到的 error 参数是在 Promise 内部异步代码执行失败时传递给 reject 的参数。

以上就是 Promise 对象的执行流程，接下来我们就用一个示例来展示 Promise 在实际编写代码中如何应用。

先来看一段用 回调函数 的写法发送 AJAX 请求的代码示例：

function handleResponse() {
   
    if (this.readyState === 4) {
   
        if (this.status === 200) {
   
            console.log(this.response);
        } else {
   
            console.log(this.status);
        }
    }
}

const<