作为前端工程师，我们经常需要获取远程数据，与后端交互。而 XMLHttpRequest 对象已经成为了历史，现在我们使用 fetch API 来发送 HTTP 请求。fetch API 天生支持 Promise，使用更加便捷。不过为了方便使用，并增加一些类库，在前端中经常使用一些封装了 fetch API 的 npm 包。这里介绍一个小巧但功能强大的 npm 包 gofetch，使用它封装的 fetch API，轻松实现不同的请求方式。
安装
使用 npm 安装 gofetch：
--- ------- ------ -------
使用示例
基础 GET 请求：
------ ------- ---- ---------- ----------------------------------- -- - ---------------------- -------------- -- - ------------------- ---
POST 请求：
------ ------- ---- ---------- ----- ------- - - --------------- ------------------- ---------------- ------- - - ----------------------------- -- -- ----- -- -------------------------- - --------- ------- --------- ---------- -- ------------------- -- - ----------------------------- ---------------- -------------- -- - ------------------- ---
gofetch 对象
get(url, params, headers)
发送 GET 请求。
- url: 请求地址
- params: 请求参数，可以是 URLSearchParams、Object、String 类型
- headers: 请求头，Object 类型
示例：
------------------------ - ----- -- ------ -- -- - ---------------- ------- - - ----------------------------- --
post(url, data, headers)
发送 POST 请求。
- url: 请求地址
- data: 请求数据，可以是 FormData、URLSearchParams、Object、ArrayBuffer、String、null 类型
- headers: 请求头，Object 类型
示例：
-------------------------- - --------- ------- --------- ---------- -- - --------------- ------------------- ---------------- ------- - - ----------------------------- --
patch(url, data, headers)
发送 PATCH 请求。
- url: 请求地址
- data: 请求数据，可以是 FormData、URLSearchParams、Object、ArrayBuffer、String、null 类型
- headers: 请求头，Object 类型
示例：
-------------------------- - --- -- ----- --------- -- - ---------------- ------- - - ----------------------------- ---
put(url, data, headers)
发送 PUT 请求。
- url: 请求地址
- data: 请求数据，可以是 FormData、URLSearchParams、Object、ArrayBuffer、String、null 类型
- headers: 请求头，Object 类型
示例：
------------------------ - --- -- ----- --------- -- - ---------------- ------- - - ----------------------------- ---
delete(url, params, headers)
发送 DELETE 请求。
- url: 请求地址
- params: 请求参数，可以是 URLSearchParams、Object、String 类型
- headers: 请求头，Object 类型
示例：
--------------------------- - --- - -- - ---------------- ------- - - ----------------------------- ---
请求拦截器
gofetch 支持请求拦截器，在请求发送之前可做一些操作，如添加请求头、修改请求数据等。
示例：
----------------------------------------- -- - ------------------------------- - ------- - - ------------------------------ -- ------ -- ----------- - - --------------- ------ ------- -- ------ ------- -- ------- -- - ------ ---------------------- ---
响应拦截器
gofetch 支持响应拦截器，在接收到响应并处理完之前可做一些操作，如修改响应数据等。
示例：
-------------------------------------------- -- - -- ------ -- ------------------ - ---------------- ------ --------- -- ------- -- - ------ ---------------------- ---
总结
gofetch 是一款非常小巧但功能强大的 npm 包，在封装 fetch API 的基础上，增加了对请求拦截器和响应拦截器的支持。使用 gofetch 可以轻松实现不同的请求方式，并非常方便地修改请求头和请求数据。在实际项目中，我们可以根据需要，使用 gofetch 来发送 HTTP 请求，并实现更加优雅的前端代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559e081e8991b448d7643