JavaScript 中的 API 调用通常是异步的，这意味着代码会继续执行而不等待 API 调用返回结果。这种异步操作使得 JavaScript 语言变得更高效，在处理复杂应用程序的同时，也增强了用户体验。然而，对于开发者来说，管理异步操作并不是一件容易的事情。传统的写法中，通过回调函数来处理 API 调用的结果，但是回调函数嵌套过多，很容易陷入回调地狱，代码可读性差，可维护性低。因此，使用 Promise 来简化异步调用，是现代 JavaScript 开发中的重要实践。
Promise 简介
Promise 是一种异步编程解决方案，状态可为 Pending，Resolved 和 Rejected 三种。
Pending（等待）：操作正在进行中，尚未完成。Resolved（已完成）：操作成功完成。Rejected（已失败）：操作失败，出现错误。
Promise 的基本用法：
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - -- ---- -- ---- ------ --- - ---------------- - ---- - --------------- - --- ------------------- -- - -- ------ -------------- -- - -- ------ --展开代码
这里我们看到，Promise 实例通过构造函数中的异步操作，可以返回成功结果 resolve 或失败错误 reject。接下来，我们可以通过调用 then 方法来处理成功结果，通过调用 catch 方法来处理失败错误。Promise 的这种用法，更加简化了异步调用，使得代码可读性更高，可维护性更好。接下来，我们通过实例来具体学习 Promise。
Promise 的实例
在实际开发中，我们常常需要与后端或第三方服务端接口进行交互。下面我们以调用 Github REST API 为例，来具体了解 Promise 的实践应用。我们将调用关键字搜索 API，先使用原生 XMLHttpRequest 来完成异步调用，然后再使用 Promise 的方式来调用。
XMLHttpRequest 实现异步调用
下面是使用原生 XMLHttpRequest 的方式来调用 Github API 的代码。
-- -------------------- ---- ------- --- --- - ---------------------------------------------------------- --- --- - --- ----------------- --------------- ---- ------ ---------- - ---------- - -- ----------- --- ---- - --- ---- - ----------------------------- ------------------ - -- ----------- - ---------- - --------------------- ---------------- -- -----------展开代码
这是一个基本的异步调用，但是它有一个明显的缺点：没有处理错误状态。如果请求失败，没有任何信息将被打印到控制台。因此，我们需要添加错误处理边界。对于这个例子，我们将使用 try-catch 语句块来确保 xhr 请求不会导致代码坏掉。
-- -------------------- ---- ------- --- --- - ------------------------------------------------ -------- --------------------------- - --- --- - --- ----------------- --------------- --- - -------- ------ ----------- ------ --- ----------------- ------- -- - ---------- - ---------- - -- ----------- --- ---- - -------------------------------------- - ---- - ---------- ----------------------- - -- ----------- - ---------- - ---------- -------------- --------- -- --- - -------------------------------- ---------- -- ------------------ ------------ -- ----------------------展开代码
在这个例子中，我们使用新的 Promise 实例来封装异步调用过程。我们将 AJAX 的操作放到 Promise 的构造函数中，如果 AJAX 调用成功，Promise 实例通过调用 resolve 函数来返回成功的数据，如果 AJAX 调用失败，Promise 实例通过调用 reject 函数来返回错误的信息。
使用 Fetch 对象
除了 XMLHttpRequest 以外，我们也可以使用 Fetch API 标准来进行异步调用。
-- -------------------- ---- ------- --- --- - ------------------------------------------------ -------- --------------------------- - ------ --------- - -------- -------------- -- - -- ------------- - ------ ---------------- - ----- --- -------------- -------- --- --- ------ -- ------------ -- - -------------------- --- - ------- ---- --- ----- ------------ ------- --- - -------------------------------- ---------- -- ------------------ ------------ -- ----------------------展开代码
在使用 Fetch API 的过程中，我们可以很方便地使用 Promise 机制，使得代码看起来更简洁和易读。
结语
Promise 是异步编程的一个强大工具，它可以让开发者更方便地处理异步调用。本文通过实例将 Promise 的相关知识点简明易懂地展示出来，希望对大家有所帮助。在实际开发过程中，我们可以结合 API 的特殊需求，进一步了解和使用 Promise，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bf54860c976d473a3e2e17
