简介
rendfetch 是一个基于原生 fetch 封装的轻量级网络请求库，它支持跨域请求、上传下载、拦截器、超时设置等功能，可在前端项目中方便地使用。
安装
通过 npm 安装 rendfetch：
npm install rendfetch --save
使用
在项目中引入 rendfetch：
import request from 'rendfetch';
发送 GET 请求：
request.get('/api/getData', { params: { id: 1 } }).then(response => {
console.log(response.data);
}).catch(error => {
console.log(error);
});发送 POST 请求：
request.post('/api/postData', { data: { name: 'Jack', age: 18 } }).then(response => {
console.log(response.data);
}).catch(error => {
console.log(error);
});设置拦截器：
-- -------------------- ---- -------
-- -------
--------------------------------------- -- -
-------------------------------------- - -----------
------ -------
-- ----- -- -
------ ----------------------
---
-- -------
------------------------------------------ -- -
------ ---------
-- ----- -- -
-- ---------------------- --- ---- -
-------------------- - ---------
-
------ ----------------------
---设置超时：
request.get('/api/getData', { timeout: 5000 }).then(response => {
console.log(response.data);
}).catch(error => {
console.log(error);
});API 文档
request.config(options)
设置全局配置项：baseUrl，headers，timeout 等。
request.config({
baseURL: 'http://localhost:3000',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
timeout: 5000
});request(url[, options])
request.get(url[, options])
request.post(url[, options])
request.put(url[, options])
request.delete(url[, options])
发送请求，options 参数同 fetch。
request.get('/api/getData', { params: { id: 1 } }).then(response => {
console.log(response.data);
}).catch(error => {
console.log(error);
});request.interceptors.request.use(onFulfilled[, onRejected])
request.interceptors.response.use(onFulfilled[, onRejected])
设置请求/响应拦截器。
-- -------------------- ---- -------
-- -------
--------------------------------------- -- -
-------------------------------------- - -----------
------ -------
-- ----- -- -
------ ----------------------
---
-- -------
------------------------------------------ -- -
------ ---------
-- ----- -- -
-- ---------------------- --- ---- -
-------------------- - ---------
-
------ ----------------------
---request.all(promises)
并发发送多个请求，返回一个 Promise。
-- -------------------- ---- ------- ------------- ---------------------------- ----------------------------- - ----- - ----- ------- ---- -- - -- ---------------- -- - ------------------------------ ------------------------------ -------------- -- - ------------------- ---
总结
rendfetch 是一个简单易用的封装库，可以提高前端开发效率，减少重复代码的编写，值得技术人员学习和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005678881e8991b448e3e94