ES6/ES2015 中的 Promises：什么是它们，以及如何使用

什么是 Promises?

Promises 是 JavaScript 异步编程模型中的一种解决方案。在 ES6/ES2015 中，Promises 是内置的一种对象，它使得异步编程更加容易和可控。

Promises 可以理解为一个容器，该容器中保存的是异步操作的结果。可以通过这个容器来处理异步操作的成功或失败情况，同时可以安排异步操作的顺序。

如何使用 Promises?

ES6/ES2015 中的 Promises 在语法上相对简单易懂，以下是基本语法：

const myPromise = new Promise((resolve, reject) => {
  // 异步操作，例如 Ajax 请求
  // 通过 resolve 或 reject 将操作结果保存到 Promise 中
});

在 Promise 构造器中需要传入一个函数，该函数的两个参数用来在异步操作结束时将操作结果存储到 Promise 实例中。

• resolve() 函数用来保存异步操作成功的结果

• reject() 函数用来保存异步操作失败的结果

示例代码

下面是一个基于 Promises 实现的 Ajax 请求示例代码：

// javascriptcn.com 代码示例
const myPromise = new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest();

  xhr.open('GET', 'https://api.example.com/data');

  xhr.onload = function() {
    if (xhr.status === 200) {
      resolve(xhr.response);
    } else {
      reject(Error('请求失败'));
    }
  };

  xhr.onerror = function() {
    reject(Error('请求出错'));
  };

  xhr.send();
});

myPromise.then(
  function(result) {
    console.log('异步操作成功，返回结果是 ' + result);
  },
  function(error) {
    console.log('异步操作失败，返回错误原因是 ' + error);
  }
);

在上述代码中，使用 Promise 将异步操作（Ajax 请求）封装起来，并且在异步操作成功或失败时通过 resolve() 或 reject() 将结果存储到 Promise 实例中。

然后我们通过 .then() 方法来处理 Promise 实例中保存的异步操作结果——当异步操作成功时，执行第一个回调函数；当异步操作失败时，执行第二个回调函数。

你还可以通过 .catch() 方法来处理 Promise 实例中保存的异步操作失败的结果，也就是上面代码中 reject() 中传递的 error 对象，具体示例如下：

myPromise
  .then(function(result) {
    console.log('异步操作成功，返回结果是 ' + result);
  })
  .catch(function(error) {
    console.log('异步操作失败，返回错误原因是 ' + error);
  });

总结

相对于传统的回调函数方式，Promises 可以让我们更加容易、可控地处理异步操作的结果，避免了回调地狱的问题。上面是基础语法的简要介绍，你可以深入学习 Promises 的高级用法，例如 Promise.all() 和 Promise.race()，以及如何使用 async/await 等工具来更加优雅地编写异步代码。

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