前言
在 Web 开发中，我们需要通过网络请求与后端进行交互，获取数据。而使用原生的 JavaScript 代码进行网络请求无疑是一件繁琐的事情，所以我们通常使用框架或者工具库来完成网络请求的操作。@beisen/fetch 就是一款方便快捷的网络请求工具库，它简单易用，功能实用。
安装和引入
我们可以通过 npm 包管理工具来安装 @beisen/fetch，执行以下命令来进行安装：
npm install @beisen/fetch --save-dev
安装完成后，在项目中通过以下方式进行引入：
import fetch from "@beisen/fetch";
基本用法
@beisen/fetch 提供了三种常见的网络请求方式：GET，POST 和 JSONP。下面我们将逐一介绍如何使用。
GET 请求
GET 请求适用于获取数据，可以通过以下方式进行发送：
fetch.get(url, data, options)
.then(res => {
// 请求成功
})
.catch(e => {
// 请求失败
});url: 请求地址data: 请求参数options: 请求配置
其中，data 和 options 是可选参数，如果不传递则会默认为 {}。例如：
fetch.get("/api/user", { username: "alice" }, { timeout: 5000 })
.then(res => {
console.log(res.data);
})
.catch(e => {
console.log(e);
});POST 请求
POST 请求适用于提交数据，可以通过以下方式进行发送：
fetch.post(url, data, options)
.then(res => {
// 请求成功
})
.catch(e => {
// 请求失败
});url: 请求地址data: 请求参数options: 请求配置
其中，data 和 options 是可选参数，如果不传递则会默认为 {}。例如：
fetch.post("/api/login", { username: "alice", password: "123456" }, { headers: { "Content-Type": "application/json" } })
.then(res => {
console.log(res.data);
})
.catch(e => {
console.log(e);
});JSONP 请求
JSONP 请求适用于跨域请求数据，可以通过以下方式进行发送：
fetch.jsonp(url, callback, options)
.then(res => {
// 请求成功
})
.catch(e => {
// 请求失败
});url: 请求地址callback: 回调函数名options: 请求配置
其中，callback 是必填参数。例如：
fetch.jsonp("https://v1.hitokoto.cn", "hitokoto", { params: { c: "a" } })
.then(res => {
console.log(res.data);
})
.catch(e => {
console.log(e);
});请求配置
@beisen/fetch 提供了一些可配置的参数，方便我们进行定制化的请求处理。
timeout
请求超时时间，单位为毫秒。
例如：
fetch.get("/api/user", { username: "alice" }, { timeout: 5000 })
.then(res => {
console.log(res.data);
})
.catch(e => {
console.log(e);
});headers
请求头信息，可以设置 Content-Type、Authorization 等头信息。
例如：
fetch.post("/api/login", { username: "alice", password: "123456" }, { headers: { "Content-Type": "application/json" } })
.then(res => {
console.log(res.data);
})
.catch(e => {
console.log(e);
});params
查询参数，可以设置 URL 上的查询参数。
例如：
fetch.jsonp("https://v1.hitokoto.cn", "hitokoto", { params: { c: "a" } })
.then(res => {
console.log(res.data);
})
.catch(e => {
console.log(e);
});总结
@beisen/fetch 是一款功能实用且简单易用的网络请求工具库，提供了 GET、POST 和 JSONP 三种常见的请求方式，并且还提供了很多可配置的参数，方便我们进行定制化的请求处理。它的出现为我们的前端开发带来了一场实用的提升，让我们能够更加高效地进行网络请求操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/beisen-fetch