JavaScript Promise 学习笔记 (第一篇)

前端

2023-10-29 20:45:16

JavaScript Promise 入门

什么是 Promise？

想象一下你正在等朋友寄来的包裹。你不知道包裹什么时候会到，但你希望尽快收到。如果你的朋友给你一个承诺，说包裹会在某一天送达，你就可以放心，不必一直担心包裹什么时候会到。

这就是 JavaScript Promise 的作用。它就像一个承诺，保证在异步操作完成时，会将结果或错误传递给你。

Promise 的状态

Promise 有三种状态：

等待： Promise 刚被创建，正在等待完成。
已完成： Promise 已完成，但还没有成功或失败。
已兑现： Promise 已成功完成。
已拒绝： Promise 因错误而完成。

生成 Promise

你可以使用 Promise.resolve() 和 Promise.reject() 方法来创建 Promise。resolve() 方法创建成功完成的 Promise，而 reject() 方法创建因错误而完成的 Promise。

// 创建一个成功完成的 Promise
const resolvedPromise = Promise.resolve("成功！");

// 创建一个因错误而完成的 Promise
const rejectedPromise = Promise.reject("失败！");

处理 Promise 结果

当 Promise 完成时，你可以使用 then() 方法来处理其结果。then() 方法接受两个回调函数作为参数，分别处理已兑现和已拒绝状态。

resolvedPromise.then(
  (result) => {
    // 处理已兑现状态
    console.log(result); // 输出："成功！"
  },
  (error) => {
    // 处理已拒绝状态
    console.log(error); // 输出："失败！"
  }
);

Promise 链

Promise 可以形成链，以便将多个异步操作连接在一起。每个 Promise 的结果可以传递给下一个 Promise，依此类推。

Promise.resolve("数据")
  .then((data) => {
    return fetch(`https://example.com/data/${data}`);
  })
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data); // 输出：从服务器获取的数据
  })
  .catch((error) => {
    console.log(error); // 处理错误
  });