在前端开发中，经常需要使用 Ajax 去请求后端接口，而 Fetch API 作为一个新的标准，逐渐被更多的开发者所接受和使用。但是，使用原生 Fetch 还有一些繁琐和不便之处，我们可以用 Promise 对其进行封装，以提高代码的可维护性和重用性。
Promise 的基本原理
Promise 是 ES6 新增的一个语言特性，它本质上是一种异步编程的解决方案。Promise 可以理解为容器，内部保存着某个未来才会结束的事件的结果。Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。
每当 Promise 状态发生改变，就会触发 then 方法绑定的回调函数。比如，当 Promise 容器里的事件已经完成时，即状态变为 fulfilled，就会调用 then 方法里面的回调函数。
下面是一个简单的 Promise 示例：
----- ------- - --- ----------------- ------- -- -
------------- -- -
----- ------ - ------------- - ----
-- -------- -
-------------------
- ---- -
----------------
-
-- ------
---
---------------- -- -
-----------------
------------ -- -
-----------------
---上面的代码实现了在1秒钟后，以 50% 的概率返回字符串 success 或 error。当 Promise 执行成功时，会调用 then 方法绑定的回调函数，打印出 success；否则，调用 catch 函数绑定的错误处理函数，打印出 error。
封装 Fetch 请求
接下来，我们就可以尝试使用上述知识，封装我们常用的 Fetch 请求。
-------- ------------ ------- - --- -
------ --- ----------------- ------- -- -
---------- --------
--------- -- -
-- -------- -
------ -----------
-
----- --- -------------- -------- ------ ----------------
--
---------- -- -
--------------
--
---------- -- -
------------
---
---
-以上代码中，我们使用了 ES6 的默认参数将 options 参数设置为空对象。Promise 接受一个参数 Executor，这个参数又接受两个函数：resolve 和 reject。它们分别是 Promise 容器的状态改变成 fulfilled 和 rejected 时的回调函数。在 Promise 容器内部，使用 Fetch API 发送请求，成功时调用 resolve 函数，回传数据；失败时调用 reject 函数，回传错误信息。
在实际使用中，我们可以先封装一个单例类，使得全局都只有一个请求实例。
----- ------- -
-------------------- -
------------ - --------
-
-------- ------- - --- -
------ -------------------- - ---- ---------
-
--------- ----- ------- - --- -
-------------- - -------
------------ - ---------------------
--------------- - ---------------
--------------- ------------------
-- -----------------
------ -------------------- - ---- ---------
-
-
----- --------------- - --- ---------------------------------以上代码中，我们使用类的方式封装了 get 和 post 两种请求方式。get 请求只需要传递 URL 即可，post 请求还需要传递请求数据。对于 post 请求，我们需要将数据序列化为 JSON 格式并加上请求头，以便后端接收。最后，我们还要调用前面封装的 request 函数实现请求，并返回 Promise 对象。
示例代码
下面是一个具体的示例代码，这个示例从后端 API 取得一条数据，并显示在页面上。我们假定后端 API 是这样的：
----- ----- - -
- --- -- ----- -------- ------ -- --
- --- -- ----- -------- ------ - --
- --- -- ----- ------- ------ - --
--
------------------------- ----- ---- -- -
----- -- - ---------------
----- ---- - --------------- -- ------- --- ----
-- ------ -
---------------
- ---- -
---------------------- -------- ---- ------ ---
-
---我们需要从这个接口取得一项数据，并在浏览器中显示它。
--------- -----
------
------
----- ----------------
------------ ---------------
-------
------
---- ----------
-----------------
------
------- -----------------------------
--------
----- ---- - --------------------------------
----- ---------- - -----------------------------------
----- --------------- - --- ---------------------------------
-------- ------------ -
-------------- - -
---------------------
--------- -----------------------------
--
-
-------- ----------- -
-------------- - --------------------
-----------------------------------
---------- -- -
-------------
--
---------- -- -
-------------- - ---------- --------------------
---
-
------------
------------------------------------ -----------
---------
-------
-------以上代码中，我们首先定义了一个请求实例 requestInstance，然后在 fetchData 函数中使用了这个请求实例的 get 方法，取得 id 为 1 的数据。当请求成功时，调用 render 函数将数据渲染到页面上；当请求失败时，在页面上显示错误信息。最后，给页面上的一个按钮添加了点击事件，可以重新取得数据并刷新页面。
总结
封装 Fetch 请求，可以简化代码编写，并提高代码的重用性和可维护性。使用 Promise 对 Fetch 进行封装，更能让代码变得有条理和易读，也方便了错误处理和状态管理。因此，在日常前端开发中，使用 Promise 封装 Fetch 请求已经成为了一种比较成熟和流行的实践方式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/649d458f48841e9894a04e18