当我们需要在前端应用中进行请求操作的时候，我们通常会使用类似于 fetch 或 axios 这样的工具库。然而，这些工具库在某些情况下可能会显得不够灵活，因为它们本质上是封装了 XMLHttpRequest 对象，而这个对象并没有提供足够灵活的 API 供我们使用。因此，我们需要一种更加灵活的方式来进行请求操作。
@rill/http 是一个极简的 HTTP 请求库，它可以帮助我们实现更加精细化的请求操作。在本篇文章中，我们将会学习 @rill/http 的基本使用方法，并通过一些例子来说明它的强大之处。
安装
在开始使用 @rill/http 之前，我们需要先通过 npm 安装它：
npm install @rill/http
安装完成后，我们就可以在我们的项目代码中引入它了：
import http from '@rill/http'
GET 请求
使用 http.get 方法来进行一个 GET 请求：
http.get('/api/data').then((response) => {
console.log(response)
})http.get 方法还可以接收一个可选的配置项对象作为第二个参数。例如，我们可以设置请求的超时时间：
http.get('/api/data', { timeout: 5000 }).then((response) => {
console.log(response)
})POST 请求
使用 http.post 方法来进行一个 POST 请求：
http.post('/api/data', { name: 'Tom', age: 20 }).then((response) => {
console.log(response)
})同样地，http.post 方法也可以接收一个可选的配置项对象作为第三个参数。例如，我们可以设置请求头：
http.post('/api/data', { name: 'Tom', age: 20 }, {
headers: {
'Content-Type': 'application/json'
}
}).then((response) => {
console.log(response)
})PUT 请求
使用 http.put 方法来进行一个 PUT 请求：
http.put('/api/data/1', { name: 'Tom', age: 21 }).then((response) => {
console.log(response)
})DELETE 请求
使用 http.delete 方法来进行一个 DELETE 请求：
http.delete('/api/data/1').then((response) => {
console.log(response)
})请求拦截
通过 use 方法，我们可以注册一个请求拦截器来进行一些自定义操作，比如在请求头中加入一些公共参数。
http.use((config) => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
})响应拦截
通过 use 方法，我们还可以注册一个响应拦截器来进行一些自定义操作，比如根据 HTTP 状态码来进行处理。
http.use((response) => {
if (response.status === 401) {
console.log('Unauthorized!')
}
return response
})总结
@rill/http 是一个非常灵活和易于使用的 HTTP 请求库。它的 API 易于理解和记忆，并且提供了各种各样的配置项供我们调整。在实际的应用开发中，我们可以根据实际需求来选用适合自己的请求库，而 @rill/http 绝对是一个值得推荐的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbf19b5cbfe1ea0611bc2