作为前端工程师，我们经常需要获取远程数据，与后端交互。而 XMLHttpRequest 对象已经成为了历史，现在我们使用 fetch API 来发送 HTTP 请求。fetch API 天生支持 Promise，使用更加便捷。不过为了方便使用，并增加一些类库，在前端中经常使用一些封装了 fetch API 的 npm 包。这里介绍一个小巧但功能强大的 npm 包 gofetch，使用它封装的 fetch API，轻松实现不同的请求方式。
安装
使用 npm 安装 gofetch：
npm install --save gofetch
使用示例
基础 GET 请求：
import gofetch from 'gofetch';
gofetch.get('/api/data').then((res) => {
console.log(res.data);
}).catch((err) => {
console.error(err);
});POST 请求：
-- -------------------- ---- ------- ------ ------- ---- ---------- ----- ------- - - --------------- ------------------- ---------------- ------- - - ----------------------------- -- -- ----- -- -------------------------- - --------- ------- --------- ---------- -- ------------------- -- - ----------------------------- ---------------- -------------- -- - ------------------- ---
gofetch 对象
get(url, params, headers)
发送 GET 请求。
- url: 请求地址
- params: 请求参数，可以是 URLSearchParams、Object、String 类型
- headers: 请求头，Object 类型
示例：
gofetch.get('/api/data', { page: 1, limit: 10 }, { 'Authorization': 'Bearer ' + localStorage.getItem('token') })post(url, data, headers)
发送 POST 请求。
- url: 请求地址
- data: 请求数据，可以是 FormData、URLSearchParams、Object、ArrayBuffer、String、null 类型
- headers: 请求头，Object 类型
示例：
gofetch.post('/api/login', { username: 'user', password: 'password' }, { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + localStorage.getItem('token') })patch(url, data, headers)
发送 PATCH 请求。
- url: 请求地址
- data: 请求数据，可以是 FormData、URLSearchParams、Object、ArrayBuffer、String、null 类型
- headers: 请求头，Object 类型
示例：
gofetch.patch('/api/data', { id: 1, name: 'updated' }, { 'Authorization': 'Bearer ' + localStorage.getItem('token') });put(url, data, headers)
发送 PUT 请求。
- url: 请求地址
- data: 请求数据，可以是 FormData、URLSearchParams、Object、ArrayBuffer、String、null 类型
- headers: 请求头，Object 类型
示例：
gofetch.put('/api/data', { id: 1, name: 'updated' }, { 'Authorization': 'Bearer ' + localStorage.getItem('token') });delete(url, params, headers)
发送 DELETE 请求。
- url: 请求地址
- params: 请求参数，可以是 URLSearchParams、Object、String 类型
- headers: 请求头，Object 类型
示例：
gofetch.delete('/api/data', { id: 1 }, { 'Authorization': 'Bearer ' + localStorage.getItem('token') });请求拦截器
gofetch 支持请求拦截器，在请求发送之前可做一些操作，如添加请求头、修改请求数据等。
示例：
gofetch.interceptors.request.use((config) => {
config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
// 修改请求数据
// config.data = { ...config.data, token: 'token' };
return config;
}, (error) => {
return Promise.reject(error);
});响应拦截器
gofetch 支持响应拦截器，在接收到响应并处理完之前可做一些操作，如修改响应数据等。
示例：
gofetch.interceptors.response.use((response) => {
// 修改响应数据
// response.data.code = response.status;
return response;
}, (error) => {
return Promise.reject(error);
});总结
gofetch 是一款非常小巧但功能强大的 npm 包，在封装 fetch API 的基础上，增加了对请求拦截器和响应拦截器的支持。使用 gofetch 可以轻松实现不同的请求方式，并非常方便地修改请求头和请求数据。在实际项目中，我们可以根据需要，使用 gofetch 来发送 HTTP 请求，并实现更加优雅的前端代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e081e8991b448d7643