在前端开发过程中，我们经常使用 fetch 方法来发送 HTTP 请求。但是，实际使用中，我们往往需要对请求进行封装处理，以便于统一处理错误，设置请求头等操作。在这种情况下，可以使用 npm 包 j-fetch，它为我们提供了一种更加方便的方式来使用 fetch 方法。
j-fetch 简介
j-fetch 是基于 fetch 方法封装的一个 HTTP 请求库，它提供了以下功能：
- 支持统一处理请求头和错误处理。
- 支持请求拦截和响应拦截。
- 支持并发请求。
- 支持请求超时设置。
安装 j-fetch
可以通过 npm 安装 j-fetch：
npm install j-fetch --save
j-fetch 的使用
先通过以下代码引入 j-fetch：
import jfetch from 'j-fetch'
发送 GET 请求
发送 GET 请求时，只需要传入请求地址即可：
jfetch.get('http://example.com/api/data').then(resp => {
console.log(resp)
}).catch(err => {
console.error(err)
})发送 POST 请求
发送 POST 请求时，需要传入请求地址和请求数据：
jfetch.post('http://example.com/api/data', {data: 'hello'}).then(resp => {
console.log(resp)
}).catch(err => {
console.error(err)
})统一设置请求头
通过 jfetch.defaults.headers 可以统一设置请求头信息：
-- -------------------- ---- ------- ----------------------- - - --------------- ------------------ - --------------------------------------------------- -- - ----------------- ------------ -- - ------------------ --
拦截器
j-fetch 提供了请求拦截和响应拦截的功能，可以在请求发送前和响应返回后进行一些操作。
-- -------------------- ---- ------- -- ------- -------------------------------------- -- - -- ---------- ------ ------- -- ----- -- - -- --------- ------ ---------------------- --- -- ------- ------------------------------------------- -- - -- --------- ------ --------- -- ------- -- - -- --------- ------ ---------------------- --- --------------------------------------------------- -- - ----------------- ------------ -- - ------------------ --
并发请求
通过 jfetch.all 可以同时发送多个请求，它返回的是一个 Promise 对象，可以在 then 中获取所有请求返回的数据。
jfetch.all([
jfetch.get('http://example.com/api/data1'),
jfetch.get('http://example.com/api/data2')
]).then(jfetch.spread((resp1, resp2) => {
console.log(resp1.data, resp2.data)
})).catch(err => {
console.error(err)
})请求超时
可以通过 jfetch.timeout 设置请求超时时间：
jfetch.timeout = 5000
jfetch.get('http://example.com/api/data').then(resp => {
console.log(resp)
}).catch(err => {
console.error(err)
})总结
j-fetch 是一个轻量级的 HTTP 请求库，它封装了 fetch 方法，提供了更加方便的方式来发送 HTTP 请求。它支持统一设置请求头和错误处理，支持请求拦截和响应拦截，支持并发请求和请求超时设置。通过学习 j-fetch 的使用，可以更加方便地发送 HTTP 请求，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bff81e8991b448d99ef