在前端开发中，我们经常需要涉及到 HTTP 请求，如何方便地进行 HTTP 请求呢？这时候，@nichoth/http 就能派上用场了。@nichoth/http 是一个简洁的封装了 XMLHttpRequest 的 JavaScript 库，提供了方便的 Promise API 和 API 请求配置。
安装
使用 npm 进行安装：
npm install @nichoth/http
使用
-- -------------------- ---- ------- ----- - ---- - - ------------------------ -- --- -- ----------------------------------------------------------------- -- - ---------------- ------- ----------- ---- -- -- ---- -- ------------------------------------------------------- - ------- -- ------ ------- ----- ------ ----------- -- - ----------------- ------- ----------- ---- --
配置项
@nichoth/http 提供了一系列的配置项，让我们可以更灵活地定制化请求。例如：
-- -------------------- ---- -------
----- - ---- - - ------------------------
------
------- ------
---- -----------------------------------------------
-------- -
---------------- ------- - - -----
--
------- -
--------- ----------
---- --
--
-------- ----
----------- -- -
-------------------- ----------- ----
--method
请求方法，支持 GET、POST、PUT、DELETE 等常见方法。
url
请求 URL，可以设置相对 URL 或绝对 URL。
headers
请求头，一般用于设置认证 token 等信息。
params
请求参数，可以通过字符串或对象形式传入。
timeout
请求超时时间，单位为毫秒。
拦截器
了解拦截器可以让我们更好地掌握请求的生命周期。@nichoth/http 提供了请求拦截器和响应拦截器，可以通过以下方式注册：
-- -------------------- ---- ------- ----- - ----- ------------------- ------------------- - - ------------------------ ------------------------------------------ -- - ---------------------- ------ ------ -- --------------------------------------------- -- - ---------------------- ------ -------- -- ----------------------------------------------------------------- -- - ---------------- ------- ----------- ---- --
错误处理
请求中难免会出现错误。@nichoth/http 提供了以下两种错误类型：
请求错误
请求错误包括状态码不是 2xx、网络错误等情况。
const { http } = require('@nichoth/http')
http.get('https://jsonplaceholder.typicode.com/test').catch(error => {
console.error('请求错误:', error)
})响应错误
响应错误包括服务端返回的错误信息。
const { http } = require('@nichoth/http')
http.get('https://jsonplaceholder.typicode.com/todos/568').catch(error => {
console.error('响应错误:', error)
})小结
@nichoth/http 是一个简单易用的 HTTP 请求库，提供了方便的 Promise API 和 API 请求配置，也支持请求拦截器和错误处理等功能。在实际项目中使用的过程中，掌握了这些用法，也能更加高效地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e2448ec