前言
当今的Web应用开发离不开前端技术，而前端开发无疑需要使用各种各样的库和工具，其中，NPM包是我们经常会使用的一种工具。其中，FetchIO是一个优秀的NPM包，它可以在发起Ajax请求的时候非常便捷。
在本篇文章中，我们将介绍FetchIO及其使用方法，让大家快速轻松地掌握如何使用这个优秀的NPM库。
什么是FetchIO
FetchIO是一个轻量级的NPM包，它提供了一种基于Fetch API的Ajax请求。在使用FetchIO时，你可以轻松地设置请求头和请求数据，同时也能够方便地处理错误信息和成功响应信息。
FetchIO具有以下特点：
- 小巧轻便，仅有不到350B的代码
- 支持Get、Post请求
- 提供请求头与请求数据扩展
- 支持全局配置请求头
使用FetchIO
安装FetchIO
使用FetchIO非常简单，在你的项目中首先安装此NPM包：
npm install --save fetchio
在React中使用FetchIO
在React中使用FetchIO，你需要先进行导入：
import FetchIO from 'fetchio';
然后，您可以使用FetchIO发起Ajax请求，比如：
FetchIO.get('/url').then( res => {
console.log(res);
}).catch( err => {
console.log(err);
})上面的代码表示我们使用FetchIO发起了一个GET请求，并且获取了服务端的响应。在catch语句块中，我们捕获了错误并输出了错误信息。
类似地，我们可以使用FetchIO发起一个POST请求：
-- -------------------- ---- -------
-------------------- -
----- ------ ---------
-------- -
--------------- ------------------
-
-------- --- -- -
-----------------
--------- --- -- -
-----------------
--上面的代码表示我们使用FetchIO发起了一个POST请求，并将name填入请求的数据中。同时，我们通过headers设置请求头的Content-Type为application/json。
全局设置FetchIO
除了在每个请求中设定请求头外，您也可以通过FetchIO.config来进行全局配置：
-- -------------------- ---- -------
------------------------- ---------------------------
------------------------- -
--------------- ------------------
---
-------------------- -
----- ------ --------
-------- --- -- -
-----------------
--------- --- -- -
-----------------
--
高级应用
在一些需要OAuth2.0 Token的Web应用中，每次请求都需要在请求头中加入Authorization信息以提供Token给服务端验证。在这种情况下，我们可以利用FetchIO的请求拦截器，对每个请求进行拦截后再添加Authorization信息，从而流畅地完成与服务端的通信。
-- -------------------- ---- -------
-- -- ----------------
-------------------------------------- -------- -- -
-- --------------------------------------
----- ----- - ---------------------------------------
-- ----------------------
-- ------- -
------------------------------- - ------
-
------ -------
---
-- -- ----------
---------------------- -
----- ------ -------- --------- ---------
---------- -- -
-- ---------
------------------------- --- -- -
-----------------
--------- --- -- -
-----------------
--
--------- --- -- -
-----------------
--上述代码表示，我们在全局中添加了一个请求拦截器，任何请求在发出前，FetchIO都会先对请求进行拦截，并在请求头中添加Authorization信息。同时，我们还添加了一个login请求，这个请求是为了在获取数据前，先让用户进行登录验证。
结语
FetchIO是一个非常优秀的NPM包，它可以方便地帮助我们发起Ajax请求，并且处理响应结果。当我们遇到一些需要设置请求头的任务时，FetchIO也提供了全局配置的支持，方便我们一次性地将请求头添加进去，避免在每个请求中都重复添加。
希望本篇文章能够帮助到广大前端开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ee81e8991b448e0a49