Promise 的基本概念

JS |

欢迎来到 ES6 Promise 的入门教程！在这篇文章中，我们将了解 Promise 的基本概念、如何创建和使用它们，以及一些常见的用例。

什么是 Promise？

Promise 是 JavaScript 中的一个对象，用于表示一个异步操作的最终完成（或失败）及其结果值。简而言之，它是一种对未来可能发生的结果的封装。

在JavaScript中，我们经常需要处理异步操作，例如从服务器获取数据、读取文件或者设置延时等。Promise为我们提供了一种更优雅、易于理解的方法来处理这些操作，让我们的代码更加简洁和可读。

创建 Promise

要创建一个Promise对象，我们需要使用 new Promise() 构造函数，并提供一个执行器函数作为参数。执行器函数接收两个参数：resolve 和 reject。这两个参数都是函数，分别用于表示异步操作成功执行完成和操作失败。

1
2
3
const myPromise = new Promise((resolve, reject) => {
  // 异步操作
});

在执行器函数中，我们可以进行异步操作（例如发起HTTP请求或者读取文件等），并在操作完成后调用 resolve() 函数。如果操作失败，我们可以调用 reject() 函数。

1
2
3
4
5
const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('操作成功');
  }, 1000);
});

使用 Promise

一旦我们有了一个Promise对象，我们可以使用 then() 方法来处理成功的结果。then() 方法接受一个回调函数作为参数，当 Promise 对象被成功解析时，这个回调函数会被执行。

1
2
3
myPromise.then((result) => {
  console.log(result); // 输出：操作成功
});

我们还可以使用 catch() 方法来处理Promise被拒绝的情况。它同样接受一个回调函数作为参数，当Promise对象被拒绝时，这个回调函数会被执行。

1
2
3
myPromise.catch((error) => {
  console.error(error);
});

为了让代码看起来更简洁，我们可以将 then() 和 catch() 方法链接在一起。

1
2
3
4
5
6
7
myPromise
  .then((result) => {
    console.log(result); // 输出：操作成功
  })
  .catch((error) => {
    console.error(error);
  });

此外，我们还可以使用 finally() 方法，不管Promise成功还是失败，都会执行这个方法。

1
2
3
4
5
6
7
8
9
10
myPromise
  .then((result) => {
    console.log(result); // 输出：操作成功
  })
  .catch((error) => {
    console.error(error);
  })
  .finally(() => {
    console.log('操作完成');
  });

总结

Promise 为我们处理 JavaScript 中的异步操作提供了一种简洁、可读的方法。在这篇文章中，我们学习了如何创建和使用Promise，以及如何处理成功和失败的情况。在你的项目中使用它们，让代码变得更加优雅和简洁。