在微信小程序开发中，使用原生的 wx.request() 调用后端接口往往会遇到异步回调函数嵌套过深的性能问题，同时也缺少 Promise 的链式调用方式。为了解决这些问题，开发者时常选择使用 Promise 语法糖或第三方框架来简化异步函数的调用。在这里，笔者向大家介绍一款基于 Promise 的 HTTP 请求库 wx-promise-http，它支持 Promise 的链式调用，同时提供了基本的请求拦截和响应拦截的机制。
安装
使用 npm 进行安装：
--- ------- --------------- ------
快速入门
使用 wx-promise-http 发起 GET 请求的示例代码：
------ ------------- ---- ------------------
-----------------------------------------------------------------
--------- -- -
----------------------
--
---------- -- -
-----------------
---使用 wx-promise-http 发起 POST 请求的示例代码：
------ ------------- ---- ------------------
---------------------------------------------------------------- - ------ ------ ----- ------ ------- - --
--------- -- -
----------------------
--
---------- -- -
-----------------
---API
wxPromiseHttp.request(config)
发送 HTTP 请求，并返回 Promise。config 参考微信官方的 wx.request() 配置。在回调函数中返回的对象中，包含了 HTTP 响应相关的数据。具体如下：
status状态码data响应数据headers响应头config请求配置
------ ------------- ---- ------------------
----- ------ - -
---- -----------------------------------------------
------- -----
--
-----------------------------
--------- -- -
-----------------
--
---------- -- -
-----------------
---wxPromiseHttp.get(url, [data], [config])
发送 GET 请求，并返回 Promise。url 表示请求的接口地址；data 表示请求的参数对象，它将被转换成查询字符串拼接在 url 后面；config 表示请求的配置，参考 wxPromiseHttp.request() API。
------ ------------- ---- ------------------
-----------------------------------------------------------------
--------- -- -
-----------------
--
---------- -- -
-----------------
---wxPromiseHttp.post(url, [data], [config])
发送 POST 请求，并返回 Promise。url 表示请求的接口地址；data 表示请求的数据对象，这个对象将被转换成字符串作为 request body；config 表示请求的配置，参考 wxPromiseHttp.request() API。
------ ------------- ---- ------------------
---------------------------------------------------------------- - ------ ------ ----- ------ ------- - --
--------- -- -
-----------------
--
---------- -- -
-----------------
---wxPromiseHttp.put(url, [data], [config])
发送 PUT 请求，并返回 Promise。url 表示请求的接口地址；data 表示请求的数据对象，这个对象将被转换成字符串作为 request body；config 表示请求的配置，参考 wxPromiseHttp.request() API。
------ ------------- ---- ------------------
----------------------------------------------------------------- - --- -- ------ ------ ----- ------ ------- -- ---------- ---- --
--------- -- -
-----------------
--
---------- -- -
-----------------
---wxPromiseHttp.delete(url, [config])
发送 DELETE 请求，并返回 Promise。url 表示请求的接口地址；config 表示请求的配置，参考 wxPromiseHttp.request() API。
------ ------------- ---- ------------------
--------------------------------------------------------------------
--------- -- -
-----------------
--
---------- -- -
-----------------
---请求拦截器
wx-promise-http 提供了一个请求拦截器机制，可以在发送 HTTP 请求前进行一些自定义的处理操作。请求拦截器是一个函数数组，每个函数接收一个 config 参数，并返回一个 config 参数。请求拦截器将按顺序执行，最后 return 的 config 参数会成为最终发送请求所使用的配置参数。
------ ------------- ---- ------------------
-------------------------------------- -- -
-- -- ---------
------ -------
--
-----------------------------------------------------------------
--------- -- -
-----------------
--
---------- -- -
-----------------
---响应拦截器
wx-promise-http 提供了一个响应拦截器机制，可以在接收到 HTTP 响应后进行一些自定义的处理操作。响应拦截器是一个函数数组，每个函数接收一个 res 参数，并返回一个 res 参数。响应拦截器将按顺序执行，最后 return 的 res 参数会成为最终返回值。
------ ------------- ---- ------------------
----------------------------------- -- -
-- -- ---------
------ ----
--
-----------------------------------------------------------------
--------- -- -
-----------------
--
---------- -- -
-----------------
---小结
wx-promise-http 是一款基于 Promise 的 HTTP 请求库，它支持 Promise 的链式调用、自定义请求拦截器和响应拦截器等特性。在微信小程序开发中，我们可以通过 wx-promise-http 来解决异步回调函数嵌套过深和缺少 Promise 的链式调用方式等问题。同时，wx-promise-http 也为后续的性能优化、错误处理和业务需求提供了一个可扩展的解决方案。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60057c9c81e8991b448ebf6c