http 请求系列

http request-01-XMLHttpRequest XHR 简单介绍

http request-01-XMLHttpRequest XHR 标准

Ajax 详解-01-AJAX（Asynchronous JavaScript and XML）入门介绍

Ajax XHR 的替代方案-fetch

Ajax XHR 的替代方案-fetch 标准

Ajax 的替代方案-axios.js

http 请求-04-promise 对象 + async/await

Promise 是什么？

Promise 是 JavaScript 中用于异步编程的一种对象。它代表了一个可能现在还没有结果，但将来会有结果的值。

Promise 的主要目的是提供一个更合理、更可控的方式来处理异步操作，比如网络请求、文件读写等。

以下是 Promise 的一些关键点：

  1. 状态：Promise 有三种状态：

    • Pending（等待）：初始状态，既不是成功，也不是失败状态。
    • Fulfilled（已成功）：意味着操作成功完成。
    • Rejected（已失败）：意味着操作失败。

  2. 创建：使用 new Promise 构造函数创建一个新的 Promise 对象。构造函数接受一个执行器函数（executor function），它将在 Promise 创建后立即执行。

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

  3. 执行器函数：这是一个自动执行的函数，接受两个参数 resolve 和 reject：

    • resolve：当异步操作成功时调用，将 Promise 状态转变为 Fulfilled。
    • reject：当异步操作失败时调用，将 Promise 状态转变为 Rejected。

  4. 链式调用：Promise 可以通过 .then() 和 .catch() 方法进行链式调用。.then() 用于指定当 Promise 成功时的回调函数，而 .catch() 用于指定当 Promise 失败时的回调函数。

    myPromise
  .then((result) => {
    // 处理结果
  })
  .catch((error) => {
    // 处理错误
  });

  5. 错误处理：如果 Promise 被拒绝，错误会传递到最近的 .catch() 调用。如果在 Promise 链中没有 .catch()，错误将被忽略。

  6. Promise.all()：这是一个静态方法，接受一组 Promise 对象作为输入，并返回一个新的 Promise 对象。这个新的 Promise 在所有输入的 Promise 都成功完成时才会成功，如果任何一个输入的 Promise 失败，则立即失败。

  7. Promise.race()：这也是一个静态方法，同样接受一组 Promise 对象。它返回一个新的 Promise，这个 Promise 将在输入的 Promise 中任何一个首先解决或拒绝时解决或拒绝。

  8. finally()：无论 Promise 是解决还是拒绝，.finally() 方法都会被调用。它通常用于执行一些清理工作。

  9. Async/Await：基于 Promise 的 async 和 await 关键字提供了一种更简洁和直观的方式来编写异步代码，使得异步代码看起来和同步代码类似。

    async function asyncFunction() {
  try {
    const result = await myPromise; // 等待 Promise 解决
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

Promise 是 JavaScript 异步编程的核心，它们使得处理异步操作变得更加简单和可靠。

为什么需要 Promise ？解决了什么问题

Promise 出现之前，JavaScript 中处理异步操作主要依赖回调函数（Callback）。

然而，回调函数存在一些问题，这些问题被称为 "回调地狱"（Callback Hell）或 "回调嵌套"，Promise 就是为了解决这些问题而设计的。以下是 Promise 解决的主要问题：

  1. 回调地狱：当多个异步操作需要按顺序执行时，嵌套的回调函数会导致代码难以阅读和维护。

    getData(function(a) {
  getMoreData(a, function(b) {
    getEvenMoreData(b, function(c) {
      // ...
    });
  });
});

    Promise 允许你以链式的方式书写异步操作，使代码更加清晰：

    getData()
  .then(a => getMoreData(a))
  .then(b => getEvenMoreData(b))
  .then(c => {
    // 处理结果
  });

  2. 错误处理：在回调函数中，错误处理通常需要在每个回调中单独处理。Promise 的 .catch() 方法提供了统一的错误处理机制。

    // 使用回调时的错误处理
getData(function(err, data) {
  if (err) {
    // 错误处理
  } else {
    // 处理数据
  }
});

// 使用 Promise 的错误处理
getData()
  .then(data => {
    // 处理数据
  })
  .catch(err => {
    // 统一错误处理
  });

  3. 代码组织：Promise 提供了一种更好的方式组织异步代码，使得逻辑更加清晰，也更容易复用。

  4. 状态管理：Promise 明确了异步操作的三种状态（Pending、Fulfilled、Rejected），这使得状态管理更加明确和容易。

  5. 并发执行：Promise 的 Promise.all() 方法可以轻松处理多个并发的异步操作，并在所有操作都完成后执行特定的回调。

  6. 顺序执行：Promise 允许你按顺序执行异步操作，而不需要在每个步骤中手动传递回调函数。

  7. 更好的控制流程：使用 async 和 await，你可以以一种更接近同步代码的方式来编写异步逻辑，这使得代码更加直观和易于理解。

  8. 避免阻塞：在某些情况下，回调函数可能会导致程序阻塞，尤其是在错误处理不当的情况下。Promise 提供了一种更流畅的方式来避免这种情况。

总的来说，Promise 提供了一种更加强大、灵活和可读性更强的方式来处理 JavaScript 中的异步操作，极大地改善了开发体验。

Promise 与 async/await 有什么不同，它们在实际开发中应该如何选择使用？

Promise 和 async/await 都是处理 JavaScript 中异步操作的方式，但它们之间存在一些关键的区别。以下是它们的主要不同点以及在实际开发中的使用选择建议：

Promise

  • 定义：Promise 是一种对象，代表了一个异步操作的最终完成或失败。
  • 语法：使用 .then() 和 .catch() 方法来指定操作成功或失败时的回调函数。
  • 链式调用：可以进行链式调用，但深层嵌套的 .then() 可能导致所谓的 "回调地狱"。
  • 错误处理：需要在每个 Promise 链中明确处理错误，否则未捕获的错误可能会被忽略。

async/await

  • 定义：async 和 await 是建立在 Promise 之上的语法糖，使得异步代码看起来和写起来更像同步代码。
  • 语法：async 关键字用于声明一个函数或块是异步的，await 关键字用于等待一个 Promise 解决。
  • 可读性：使得异步代码更易于阅读和理解，因为它减少了回调和 Promise 链的复杂性。
  • 错误处理：可以使用传统的 try/catch 语句来处理错误，这使得错误处理更直观和一致。

在实际开发中的选择使用

  1. 可读性和简洁性：

    • 如果你倾向于写更简洁、更易读的代码，推荐使用 async/await。它让异步代码的流程看起来更直观。

  2. 错误处理：

    • 如果你需要更直观的错误处理方式，推荐使用 async/await，因为它允许使用 try/catch 块。

  3. 代码复杂性：

    • 对于复杂的异步逻辑，特别是涉及多个并行或依赖的异步操作，使用 Promise 可能更灵活，尤其是结合 Promise.all()、Promise.race() 等方法。

  4. 库和框架的兼容性：

    • 如果你正在使用的库或框架主要返回 Promise，可能需要使用 Promise 来与它们交互，尽管 async/await 也可以与 Promise 一起使用。

  5. 团队习惯和代码风格：

    • 考虑团队的熟悉度和代码风格。如果团队更熟悉 Promise，或者项目中已经广泛使用了 Promise，那么继续使用 Promise 可能是更好的选择。

  6. 逐步迁移：

    • 如果你正在维护一个已经使用 Promise 的大型项目，可能需要逐步迁移到 async/await，以保持代码的一致性。

  7. 环境支持：

    • 虽然现代浏览器和 Node.js 都支持 async/await，但如果你的目标环境需要支持较旧的 JavaScript 引擎，可能需要考虑 Promise 的兼容性。