介绍
在前端开发中，我们常常需要与后端进行数据交互，传统的方式是使用 Ajax 进行异步请求。然而，这种方式往往比较繁琐，需要手动拼接参数和 URL，容易出错，代码可读性也不高。因此，前端工程化的重要性愈发显得重要。
@bbfe/cs-connect 是一款基于 axios 的前端工程化请求库，通过封装、统一接口，简化了开发过程，并提高了代码可读性和可维护性。
本文将详细介绍 @bbfe/cs-connect 的使用方法。
安装
首先，我们需要使用 npm 或 yarn 进行安装。
--- ------- ---------------- - -- ---- --- ----------------
使用方法
初始化
在使用 @bbfe/cs-connect 之前，我们需要先对其进行初始化，以便于全局统一配置。
------ - ---- - ---- ------------------- ------ -------- ------------------------- ---
在 init 方法中，我们将 baseURL 配置为后端 API 的根路径，以便于后面进行请求时自动补全 URL。
当然，@bbfe/cs-connect 也支持更灵活的配置方式，如自定义请求头、请求拦截器等。详情可参考官方文档。
发送请求
在 @bbfe/cs-connect 中，我们可以使用 get、post、put、delete 等方法进行请求。这些方法返回的是一个 Promise 对象。
------ - --- - ---- -------------------
------------- - -- ----
------- - -- --- --
------- --
--------- --
--
----- - -- -----
----- ----
--
-------- - -- ---
-------------- ------- ----
-
----------- -- -
-----------------
------------ -- -
-------------------
---在请求时，我们需要传递一个请求路径和一些参数。其中，params 用于包含 URL 参数，如 /users?pageNo=1&pageSize=10；data 用于包含请求体参数，如 {name: '张三'}。
请求头也可以通过传递 headers 参数来设置。
错误处理
在请求过程中，很有可能会出现一些错误，如网络错误、请求超时等。@bbfe/cs-connect 支持自定义错误处理函数，以便于我们针对不同类型的错误进行处理。
------ - --------------- - ---- ------------------- ------------------- -- - ------------------- ---
在上面的例子中，我们将错误处理函数设置为一个打印错误信息到控制台的函数。当然，我们也可以在这里对错误进行统一格式化、记录日志等。
拦截器
在发送请求前、响应返回后，我们还可以设置拦截器，以便于在这两个阶段进行更深入的操作，如修改请求头、添加 loading、统一错误处理等。
------ - ---------------------- ---------------------- - ---- ------------------- ---------------------------- -- - -- -------------- ---------------------------- - ------- ----- -- -- ------- -------------- ------ ------- --- -------------------------- -- - -- -- ------- -------------- ------ --------- -- --- -- - -- ------ ------------------- ------ -------------------- ---
在上面的例子中，我们在请求发送前添加了身份认证信息，并显示了 loading；在响应返回后，隐藏了 loading，并统一处理了错误。
示例代码
最后，我们来看一下完整的示例代码。
------ - ----- ---- ---------------------- ----------------------- --------------- - ---- -------------------
------
-------- -------------------------
---
------------------- -- -
-------------------
---
---------------------------- -- -
---------------------------- - ------- -----
--------------
------ -------
---
-------------------------- -- -
--------------
------ ---------
-- --- -- -
-------------------
------ --------------------
---
------------- -
------- -
------- --
--------- --
--
----- -
----- ----
--
-------- -
------------------ --------
-
----------- -- -
-----------------
------------ -- -
-------------------
---在上面的示例中，我们使用 init 方法对 @bbfe/cs-connect 进行初始化，并通过 setErrorHandler 方法、setRequestInterceptor 方法以及 setResponseInterceptor 方法配置拦截器。最后使用 get 方法发送请求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600573aa81e8991b448e9a3e