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 的一些关键点：

状态：Promise 有三种状态：

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

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

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

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

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

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

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

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

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

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 解决的主要问题：

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

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

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

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

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

// 使用回调时的错误处理
getData(function(err, data) {
  if (err) {
    // 错误处理
  } else {
    // 处理数据
  }
});
// 使用 Promise 的错误处理
getData()
  .then(data => {
    // 处理数据
  })
  .catch(err => {
    // 统一错误处理
  });

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

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

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

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

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

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

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

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

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

Promiseasync/await在实际开发中的选择使用

可读性和简洁性：

错误处理：

代码复杂性：

库和框架的兼容性：

团队习惯和代码风格：

逐步迁移：

环境支持：