ES6 中的 Promise 详解-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，异步操作是非常常见的。很多时候我们需要发送网络请求、读取文件等操作，而这些操作都是需要时间的。如果没有处理好异步操作，页面就会出现卡顿或者无响应等情况。有了 Promise，我们就能够非常简单地处理异步操作，让我们的代码变得更为优雅、易读且易于维护。

Promise 是什么？

Promise 是 JavaScript 这门语言提供的一种异步编程解决方案，它可以看做是异步编程的一种代表。在 ES6 之前，我们使用回调函数来处理异步操作，但是随着项目规模越来越大，回调函数嵌套又深又多，代码不仅难以维护，而且还容易产生回调地狱的问题。Promise 的出现就是为了解决这些问题。

Promise 是一个对象，它用于表示一个异步操作的结果。它有三个状态：

Pending（进行中）：表示异步操作正在进行中，还没有结果。
Fulfilled（已成功）：表示异步操作已经成功完成，此时 Promise 对象返回一个结果。
Rejected（已失败）：表示异步操作已经失败，此时 Promise 对象返回一个错误信息。

Promise 的基本用法

首先，我们可以使用 Promise 构造函数来创建一个 Promise 对象。

let promise = new Promise(function(resolve, reject) {
  // 异步操作
  if (/* 异步操作成功 */) {
    resolve(value);
  } else {
    reject(error);
  }
});

Promise 构造函数接受一个函数作为参数，这个函数里面编写的是异步操作的代码。其中，resolve 和 reject 分别代表异步操作成功和失败的情况。resolve 返回的是 Promise 对象的成功结果，而 reject 返回的则是 Promise 对象的错误信息。

下面是一个简单的 Promise 示例：

// javascriptcn.com 代码示例
let promise = new Promise(function(resolve, reject) {
  // 异步操作
  setTimeout(function() {
    resolve('Hello, Promise!');
  }, 1000);
});

promise.then(function(value) {
  console.log(value);
});

上面的代码中，我们使用 setTimeout 模拟了一个异步操作，在 1 秒钟之后返回一个字符串。在 Promise 内部，我们使用 resolve 方法来将异步操作的结果返回。

而在外部，我们使用 then 方法来监听 Promise 对象的状态。当 Promise 的状态变为 Fulfilled 时，我们就可以拿到异步操作的结果了。在 then 方法中，我们可以传入一个回调函数，当 Promise 的状态变为 Fulfilled 时，这个回调函数就会被调用。

Promise 中的链式调用

一个 Promise 对象的 resolve 方法和 reject 方法返回的都是一个 Promise 对象，因此在 Promise 中可以进行链式调用。这样写起来的代码简单易读，而且同步函数的写法更加贴切。

// javascriptcn.com 代码示例
let job = function() {
  return new Promise(function(resolve, reject) {
    // 异步操作
    setTimeout(function() {
      resolve('Step 1 done!');
    }, 1000);
  });
}
  
job().then(function(result) {
  console.log(result);
  return new Promise(function(resolve, reject) {
    // 异步操作
    setTimeout(function() {
      resolve('Step 2 done!');
    }, 1000);
  });
}).then(function(result) {
  console.log(result);
  return new Promise(function(resolve, reject) {
    // 异步操作
    setTimeout(function() {
      resolve('Step 3 done!');
    }, 1000);
  });
}).then(function(result) {
  console.log(result);
});

上面代码中使用的 then 返回的都是异步操作的结果，后续使用 then 的函数的第一个参数也是异步操作的结果，这样就能构建起一个链式调用的形式。链式调用代码的可读性更好，并且代码的逻辑流程更加清晰。

Promise 中的错误处理

与异步操作的结果一样，异步操作中可能会有错误发生，这时候我们就需要对错误进行处理。错误处理的方式也很简单，Promise 对象有一个 catch 方法用于处理错误。

// javascriptcn.com 代码示例
let promise = new Promise(function(resolve, reject) {
  // 异步操作
  setTimeout(function() {
    reject(new Error('Oops, something went wrong!'));
  }, 1000);
});

promise.catch(function(error) {
  console.log(error);
});

在这个例子中，我们让异步操作失败并传递一个错误信息给 reject。在外部使用 catch 方法来捕获这个错误并进行处理。

Promise.all 的使用

常常会遇到一种情况，我们需要同时发起多个异步请求，等所有请求都完成后再进行下一步操作。这个时候就可以使用 Promise.all 来实现，Promise.all 可以接受一个数组，里面存放着多个 Promise 对象。

// javascriptcn.com 代码示例
let p1 = new Promise(function(resolve, reject) {
  // 异步操作
  setTimeout(function() {
    resolve('First done!');
  }, 2000);
});

let p2 = new Promise(function(resolve, reject) {
  // 异步操作
  setTimeout(function() {
    resolve('Second done!');
  }, 1000);
});

Promise.all([p1, p2]).then(function(results) {
  console.log(results[0]);
  console.log(results[1]);
});

在这个例子中，我们同时发起两个异步请求（p1 和 p2），使用 Promise.all 来等待两个请求全部完成后再执行后续操作。在 Promise.all 的回调函数中，我们可以得到一个数组，里面存放着两个 Promise 对象的结果。

Promise 的错误穿透

我们刚刚使用了 Promise.catch 方法来处理错误，但是这个方法有一个缺点，就是他只能处理前面的 Promise 对象的错误。如果 Promise 数组中有一个 Promise 对象返回了错误，那么 Promise.all 就会立即返回错误信息，而且后续的 Promise 对象并不会继续执行。

如果我们想要让 Promise.all 能够正确地处理错误，就需要使用一个技巧：Promise 对象的错误是会被穿透（propagate）到最后一个 Promise 封装的回调函数中。这个技巧可以让我们把所有的错误处理代码统一放在一个地方。

Promise.all([p1, p2]).then(function() {
  // 所有操作成功完成
}).catch(function(error) {
  console.log(error);
});

在这个例子中，如果 Promise 数组中有一个 Promise 对象返回了错误，Promise.all 就会立即跳到 catch 回调函数中进行错误处理。

总结

Promise 是一种非常有用的异步编程解决方案，它可以帮助我们解决回调地狱的问题，同时也让我们的代码更加优雅、易读且易于维护。在实际开发中，使用 Promise 可以帮助我们更好地处理异步操作，提高开发效率和代码质量。

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