返回

Promise进阶学习：精通17道习题，巩固概念

前端

巩固 Promise 概念：17 道从基础到进阶的练习

什么是 Promise？

Promise 是一种 JavaScript 对象，用于处理异步操作的结果。它提供了一种机制来处理异步操作的成功或失败。Promise 有三种状态：未决（pending）、已解决（resolved）和已拒绝（rejected）。

Promise 的基本概念

让我们从了解 Promise 的基本概念开始：

  • 创建 Promise： 可以使用 new Promise((resolve, reject)) 创建一个新的 Promise。resolve 函数用于解决 Promise 并传递结果值，而 reject 函数用于拒绝 Promise 并传递错误值。
  • Promise 的状态： Promise 有三种状态：未决（等待结果）、已解决（操作成功完成）和已拒绝（操作失败）。
  • 处理 Promise： 可以使用 .then() 和 .catch() 方法来处理已解决和已拒绝的 Promise。.then() 处理已解决的 Promise，而 .catch() 处理已拒绝的 Promise。

使用 Promise 处理异步任务

现在我们知道了 Promise 的基础知识，让我们看看如何使用它们来处理异步任务，例如网络请求和定时器：

网络请求

// 使用 fetch() 发出网络请求
fetch('https://example.com/api')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

定时器

// 创建一个定时器，在 2 秒后解决 Promise
const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('完成！'), 2000);
});

promise.then(result => console.log(result));

Promise 的链式调用

Promise 链式调用允许我们将多个 Promise 链接在一起，以便在第一个 Promise 解决后执行后续 Promise。这使代码更具可读性和可维护性。

fetch('https://example.com/api')
  .then(response => response.json())
  .then(data => {
    // 对数据进行处理
    return data.map(item => item.name);
  })
  .then(names => console.log(names))
  .catch(error => console.error(error));

Promise 的错误处理

Promise 提供了 .catch() 方法来处理已拒绝的 Promise。使用 .catch()，我们可以优雅地处理错误并防止应用程序崩溃。

fetch('https://example.com/api')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    console.error(error);
    // 处理错误
  });

Promise 的并发执行

Promise.all 和 Promise.race 可用于并发执行多个 Promise。Promise.all 等待所有 Promise 解决，而 Promise.race 等待第一个 Promise 解决或拒绝。

// 使用 Promise.all 等待所有 Promise 解决
const promises = [
  fetch('https://example.com/api1'),
  fetch('https://example.com/api2'),
  fetch('https://example.com/api3'),
];

Promise.all(promises)
  .then(responses => {
    // 所有请求已解决
    // 处理响应
  })
  .catch(error => console.error(error));

// 使用 Promise.race 等待第一个 Promise 解决或拒绝
const promises = [
  fetch('https://example.com/api1'),
  fetch('https://example.com/api2'),
  fetch('https://example.com/api3'),
];

Promise.race(promises)
  .then(response => {
    // 第一个请求已解决或拒绝
    // 处理响应
  })
  .catch(error => console.error(error));

Promise 的高级应用

Promise 还提供了更多高级应用，例如 Promise.resolve 和 Promise.reject。

Promise.resolve

Promise.resolve 立即解决一个 Promise，无论其值是什么。

// 使用 Promise.resolve 立即解决一个 Promise
const promise = Promise.resolve('完成！');

promise.then(result => console.log(result));

Promise.reject

Promise.reject 立即拒绝一个 Promise，无论其原因是什么。

// 使用 Promise.reject 立即拒绝一个 Promise
const promise = Promise.reject(new Error('失败！'));

promise.catch(error => console.error(error));

结论

Promise 是 JavaScript 中处理异步操作的强大工具。通过掌握 Promise 的概念，你可以编写可读性强、可维护性高的异步代码。

常见问题解答

  1. 如何知道 Promise 是否已解决或拒绝？

    • 使用 .then() 和 .catch() 方法来处理已解决和已拒绝的 Promise。

  2. 为什么使用 Promise 链式调用？

    • Promise 链式调用使代码更具可读性和可维护性，并允许你将多个 Promise 链接在一起。

  3. 如何处理 Promise 中的错误？

    • 使用 .catch() 方法来处理已拒绝的 Promise 并优雅地处理错误。

  4. Promise.all 和 Promise.race 有什么区别？

    • Promise.all 等待所有 Promise 解决，而 Promise.race 等待第一个 Promise 解决或拒绝。

  5. Promise.resolve 和 Promise.reject 有什么作用？

    • Promise.resolve 立即解决一个 Promise，无论其值是什么，而 Promise.reject 立即拒绝一个 Promise，无论其原因是什么。