真正深入理解 Promise 异步编程-JavaScript中文网-JavaScript教程资源分享门户

异步编程的基础概念

在前端开发中，异步编程是必不可少的技能之一。因为在客户端JavaScript中，有大量需要异步编程的地方，比如 HTTP 请求、事件处理等等。

异步编程是在函数内部，将一些操作推迟到将来执行。通常这些操作需要等到某些条件满足或者等待某些事件发生后，我们才能获得结果。异步编程允许我们在等待的同时，继续执行其他操作。这样就可以提高程序的效率，充分利用计算机的资源。

但是，在异步编程中，由于异步操作完成的时间是不确定的，这时候就需要一些机制来处理异步操作的结果。在ES6中，Promise 就是解决异步编程的一种方法。

Promise是什么

Promise 是一种异步编程的解决方案，它是 JavaScript 中处理异步编程的一种方式。

在异步编程中，Promise 用于表示一个异步操作的最终完成（或者失败）及其结果值。

Promise 本身是一个对象，可以通过 new Promise() 构造函数来创建一个 Promise 实例对象。

Promise 主要有三种状态：

Pending：状态从 Promise 被创建之后，有可能会变成 Pending 状态。在这个状态下，Promise 是不可用的。
Fulfilled（已完成/已解决）：在异步操作成功完成后，状态会变成 Fulfilled，这时候 Promise 实例对象会返回异步操作的结果。
Rejected（已失败/已拒绝）：在异步操作失败后，状态会变成 Rejected，这时候 Promise 实例对象会返回一个错误对象。

当 Promise 的状态变成 Fulfilled 或者 Rejected 时，Promise 的 then() 方法会被调用。then() 方法可以接收两个参数，一个是成功回调函数，一个是失败回调函数。在 Promise 的状态变成 Fulfilled 时，成功回调函数会被执行；在 Promise 的状态变成 Rejected 时，失败回调函数会被执行。

Promise的用法

在 Promise 中，通常需要用到 Promise 的三个方法：

then()：当 Promise 的状态为 Fulfilled 时会调用 then() 方法中的回调函数，该函数会接收一个参数，即异步操作的结果。
catch()：当 Promise 的状态为 Rejected 时会调用 catch() 方法中的回调函数，该函数会接收一个参数，即错误对象。
finally()：不管 Promise 最后的状态如何，都会调用 finally() 方法中的回调函数。

下面是一个基本的 Promise 的使用示例：

// javascriptcn.com 代码示例
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('hello world');
            // reject(new Error('error message'));
        }, 1000);
    });
}

fetchData().then(data => {
    console.log(data);
}).catch(error => {
    console.error(error);
}).finally(() => {
    console.log('fetch data end');
});

上述代码中，我们创建了一个 fetchData() 函数，它返回一个 Promise 实例对象。在 Promise 实例对象中，我们使用 setTimeout() 来模拟异步操作。然后，我们调用了该 Promise 实例对象的 then() 方法来监听它的状态变化，当状态为 Fulfilled 时，会调用 then() 方法中的回调函数，该函数会接收一个参数，即异步操作的结果。当状态为 Rejected 时，会调用 catch() 方法中的回调函数，该函数会接收一个参数，即错误对象。最后，不管 Promise 最后的状态如何，都会调用 finally() 方法中的回调函数。

Promise的链式调用

Promise 还支持链式调用，链式调用可以使我们使用 Promise 时代码更加简洁和优雅。

在 Promise 链式调用中，then() 方法中的回调函数可以返回新的 Promise 实例对象。这样可以将多个 Promise 实例对象串联起来，形成一个 Promise 链条。在 Promise 链条中，每个 Promise 实例对象的状态都会逐一被处理。当 Promise 实例对象状态变成 Fulfilled 时，链条中下一个 Promise 实例对象的 then() 方法中的回调函数就会被调用，直到链条的最后一个 Promise 实例对象处理完毕。

下面是一个 Promise 链式调用的示例：

// javascriptcn.com 代码示例
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('hello world');
        }, 1000);
    });
}

fetchData().then(data => {
    console.log(data);
    return 'promise1';
}).then(data => {
    console.log(data);
    return 'promise2';
}).then(data => {
    console.log(data);
}).catch(error => {
    console.error(error);
}).finally(() => {
    console.log('fetch data end');
});

上述代码中，我们定义了一个 fetchData() 函数，该函数返回一个 Promise 实例对象。然后，我们通过 Promise 的 then() 方法，形成了一个 Promise 链条。在 Promise 链条中，我们在回调函数中返回了一个新的 Promise 实例对象。因此，每个 Promise 实例对象都被串联起来，形成了一个 Promise 链条。在链条中的每一个节点上，我们都可以进行数据处理以及状态判断。

总结

Promise 是异步编程的一种解决方案，用于表示一个异步操作的最终完成（或者失败）及其结果值。Promise 可以通过链式调用的方式，形成一个 Promise 链条。在链条中的每个节点上，我们都可以进行数据处理以及状态判断。Promise 的基本使用方法已经比较简单，但需要掌握 Promise 链式调用的方法，才能更加灵活地运用 Promise 进行异步编程。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654bccf27d4982a6eb59a362