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