使用 Promise 封装 Fetch
前端开发中，我们通常会使用 Fetch API 来发送网络请求，它是一种比传统 XMLHttpRequest 更现代化的方式，但如果我们需要执行一系列连续的请求，且要保证顺序和顺利，这就需要用到 Promise。
Promise 简介
很多初学者会对 Promise 的概念感到困惑，下面简单介绍一下 Promise 的概念。
Promise 是 ES6 中新增的一种异步编程方法，通俗理解，Promise 是一种承诺，表示异步操作的结果，无论异步操作成功或失败，最终都会返回一个 Promise 对象，便于我们进行成功或失败的操作。
Promise 对象有 3 种状态，分别是 pending（进行中）、fulfilled（已成功）、rejected（未成功）。
封装 Fetch
封装 Fetch 可以帮助我们更好地处理多个请求之间的依赖关系，可以使用 Promise 来确保它们按照正确的顺序执行。
下面是一个示例：
-- -------------------- ---- -------
-------- ----------- -
------ ---------------- -- ----
-------------- -- ---------------- -- -- ----
---------- -- -
----- -------- - --------
----- ------------- - --------------- -- -
------ ------------------------------------ -- ----------------
--
------ --------------------------
--
-
-----------
------------ -- -
-------------------
--
------------ -- -
-------------------
--以上代码中，首先发起一次 /movies 的请求并解析 JSON，得到一个包含多个影片 ID 的数组，接着通过 map 方法分别发送 /movies/${id} 的请求，最后使用 Promise.all 等待所有的请求完成，最终返回一个包含多个影片信息的数组。
在以上示例中，Promise.all 方法会等待所有请求都完成后返回结果，如果任意一个请求失败，那么 Promise.all 也会失败，进入 catch 分支。
Promise Chaining
在封装多个请求的过程中，我们可能需要依赖之前请求的结果来决定下一次请求的参数，此时可以使用 Promise Chaining（链式调用）。
下面是一个示例：
-- -------------------- ---- -------
-------- ------------------- -
------ --------------------------------------------------------
-------------- -- ----------------
-------------- -- -
----- --------- - ---------------
------ ----------------
--
-------------- -- ----------------
---------- -- -
----- --------- - -------------------------
----- --- - -----------------------------
------- - ---------
------------------------------
--
------------ -- -
-------------------
--
-在以上示例中，首先发起一个 /users/${userId} 的请求并解析 JSON，得到包含用户头像地址 avatarUrl 的对象，接着使用 fetch 方法发送头像请求，最后使用 blob 方法将头像转成 Blob 对象并生成图片元素。
指导意义
使用 Promise 封装 Fetch 有助于我们更好地管理复杂的异步操作和回调函数，使代码更加清晰和易于维护。在实际开发中，我们可以根据具体情况封装出适合自己的请求方法。
同时，值得一提的是，使用 async/await 也是一种比较优美的异步编程方法，它是在 Promise 基础上的语法糖，可以更加简单地实现异步操作，但也需要兼顾兼容性和性能等问题。
总结
在前端开发中，网络请求是非常常见的操作，使用 Promise 封装 fetch 是一种非常优秀的编程方式。Promise 的优点不仅仅在于封装异步操作，还包括代码的清晰和可维护性等方面。
当然，在使用 Promise 的时候，也需要注意错误处理和性能等问题。希望本篇文章能对大家在日常学习和实践中有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64596314968c7c53b0b86aee