前言
在现代 Web 应用中，离不开前端与后端数据的交互。而在前端与后端数据交互的过程中，通常需要使用 Ajax 或 Fetch 来完成数据请求。而其中 Fetch 是当前主流的数据请求方式，因为它有更好的语法和更高的灵活性。
在使用 Fetch 的时候，我们往往需要进行一些共同的处理，比如请求数据的 URL 拼接、请求头设置、错误处理等。这时候，我们可以使用 npm 包 vend-fetch 来帮助我们完成这些公共处理。
本文将会详细介绍 vend-fetch 的使用方式，在此之前你需要了解 Fetch 的基本用法。
什么是 vend-fetch
vend-fetch 是一个用于简化 Fetch 请求的 npm 包，它可以帮助我们更方便地进行数据请求，并且可以统一处理错误等共性问题，减少了重复代码的编写。
安装
使用 npm 命令进行安装：
npm install vend-fetch --save
使用示例
在我们开始使用 vend-fetch 的时候，我们需要先进行一些配置步骤，这里提供一份最基本的配置示例：
-- -------------------- ---- ------- ------ ----- ---- ------------- -- ---- -------------- - - -- -------- ----- ------ ------------------ -- -------- -------------- --------- -- - ---------------------------- -- --------- ------ -------- -- -- ---------- ------------- -------- -- - --------------------------- -- -------- ------ ------- -- -- ---------- ------------- ------- -- - --------------------------- -- ------- ------ ------ -- -- -- -- --- -------- ---------------------------------------- ------------------- - ------- ------ ------- - --- ---- -- ---------------- -- - -------------------- ---展开代码
上面的代码主要做了以下几个工作：
引入
vend-fetch进行全局配置，添加 token，以及三个拦截器：beforeRequest、afterRequest、errorHandler
请求数据，并且在请求成功后将结果输出到控制台
下面是一些常用的用法：
GET 请求
-- -------------------- ---- ------- ------ ----- ---- ------------- ------------------- - ------- ------ ------- - --- ---- -- ---------------- -- - -------------------- ---展开代码
POST 请求
-- -------------------- ---- ------- ------ ----- ---- ------------- -------------- - ------- ------- ----- - ----- ------- ---- --- -- ---------------- -- - -------------------- ---展开代码
PUT 请求
-- -------------------- ---- ------- ------ ----- ---- ------------- -------------- - ------- ------ ----- - --- ---- ----- ------- ---- --- -- ---------------- -- - -------------------- ---展开代码
DELETE 请求
-- -------------------- ---- ------- ------ ----- ---- ------------- -------------- - ------- --------- ------- - --- ---- -- ---------------- -- - -------------------- ---展开代码
文件上传
-- -------------------- ---- ------- ------ ----- ---- ------------- ----- -------- - --- ----------- ----------------------- ------ --------------------- - ------- ------- ------------ ------ -------- - --------------- ---------------------- -- ----- --------- ---------------- -- - -------------------- ---展开代码
请求拦截器
import fetch from 'vend-fetch'; fetch.defaults.beforeRequest = (options) => { const token = localStorage.getItem('access_token'); options.headers.Authorization = `Bearer ${token}`; return options; };
响应拦截器
-- -------------------- ---- ------- ------ ----- ---- ------------- --------------------------- - -------- -- - -- ------------ --- -- - ------ ----------------------------- - ---- - ------ ------------------------------- - --展开代码
错误处理拦截器
import fetch from 'vend-fetch'; fetch.defaults.errorHandler = (error) => { console.error(error.toString()); return Promise.reject(error); };
总结
使用 vend-fetch 可以简化我们的代码，提高开发效率，使我们更加专注于业务逻辑的实现，避免了很多重复的代码编写。同时，在全局配置的拦截器中，我们可以做一些共性的处理，比如请求头的设置、错误处理等，为整个应用带来更好的健壮性和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005527581e8991b448cff40
