前言
在前端开发中很常见的一个技术栈就是使用 http 请求 API 数据。在实际的开发中我们通常要实现多个请求串行或并行执行以及请求的错误处理等。这些操作我们可以自己手写代码来实现，也可以使用 npm 包提供的工具来解决这些问题。其中，http-compose 就是一个非常优秀的 npm 包。下面将展示使用 npm 包 http-compose 来优化和简化 http 请求代码。
http-compose 简介
http-compose 是一个辅助 http 请求的 npm 包。它通过 Promise 链条，让请求按照一定的规律执行，同时支持请求错误时的处理。http-compose 包含了串行、并行、特殊请求的处理等功能。
安装 http-compose
使用 npm 安装 http-compose:
npm install --save http-compose
如果你使用的是 yarn:
yarn add http-compose
使用 http-compose
基本用法
下面是使用 http-compose 发送一个 GET 请求，并且处理返回结果的过程：
-- -------------------- ---- ------- ------ - ----------- - ---- -------------- ------------- ---- ----------------------------------------------- ------- ------ -------- - --------------- ------------------ -- ---------------- -- - --------------------- -------------- -- - -------------------- --
这段代码中，我们使用了 httpCompose() 方法发起了一个 GET 请求，在请求成功后，使用 then() 处理返回结果。如果请求失败，使用 catch() 处理返回的错误。
并行请求
假设我们需要向两个不同的服务器请求数据。如果使用普通的网络请求，这个过程将会非常慢。我们可以使用 http-compose 同时发起多次请求：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
-------------
-
----- -------
-------- ---------------------------------------
---- -----------
------- ------
--
-
----- --------
-------- ---------------------------------------
---- -----------
------- ------
--
----------------- -- -
----------------------
--------------- -- -
---------------------
--这段代码中，我们使用了一个数组作为 httpCompose() 的参数，数组中可以包含多个对象，每个对象对应一个请求。在上例中，我们使用了 User 和 To-do 两个请求名称，通过 responses 处理返回结果。
串行请求
使用 httpCompose 发起串行请求只需要按照顺序进行即可：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
-------------
-
----- -------
-------- ---------------------------------------
---- -----------
------- ------
--
-
----- --------
-------- ---------------------------------------
---- -----------
------- ------
--
-- - --------- ----- ----------------- -- -
----------------------
--------------- -- -
---------------------
--需要注意的是，我们加入了一个可选属性 { parallel: false } 来改变执行方式。
特殊请求
httpCompose 还支持一些特殊的请求，例如使用 query 参数时：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
-------------
---- ------------------------------------------------
------- ------
------- -
------- --
--
---------------- -- -
---------------------
-------------- -- -
--------------------
--在这里，我们使用了 params 来指定 postId 参数。
错误处理
与普通请求一样，当网络请求发生错误时，我们需要对其进行处理。使用 http-compose 可以非常简单地处理错误：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
-------------
---- ------------------------------------------------
------- ------
------- -
------- --
--
---------------- -- -
---------------------
-------------- -- -
--------------------
--当请求发生错误时，控制台会输出 error。
总结
在本文中，我们介绍了 http-compose 的基本用法，包括并行、串行、特殊请求和错误处理等功能。通过使用 http-compose，我们可以大大简化和优化前端 http 请求代码，并且使其更加的鲁棒和可维护。我们也可以结合 Promise 和 async/await 来更好的实践 http-compose 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005547881e8991b448d1be6