前言
在我们进行前端开发的时候，经常需要向服务端请求数据，由于浏览器自带的 XMLHttpRequest 略显繁琐，所以我们需要一个更加方便易用的工具，fetch 就是其中一种常用的方法。不过，fetch 本身存在一些兼容性问题，不同的浏览器实现也各有不同。为了解决这些兼容性问题，我们可以选择使用第三方库，本文就介绍一款实用的 npm 包 fetchy-request 的使用方法。
fetchy-request 是什么
fetchy-request 是一个轻量级的 Fetch API 封装，使用 Promise 对象对请求进行管理。fetchy-request 将请求方法进行了简化，使得从服务端请求数据变得更加容易。
安装 fetchy-request
在命令行执行以下命令安装 fetchy-request：
npm install fetchy-request
也可以通过 yarn 安装：
yarn add fetchy-request
如何使用 fetchy-request
使用 fetchy-request 非常简单，以下是一个例子：
import { request } from 'fetchy-request';
request('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));通过 import 引入 request 方法后，直接传入请求 URL 即可返回一个 Promise 对象，然后使用 .then() 方法获取数据，使用 .catch() 方法捕获异常。
fetchy-request 同时支持 GET / POST / PUT / DELETE 方法
我们可以通过配置选项来调整请求方法。例如，我们可以指定请求方法为 POST，向服务端发送一串 JSON 数据：
-- -------------------- ---- -------
----------------------------------------------------- -
------- -------
----- -------
-------- -
--------------- ------------------
--
----- ----------------
------ ------
----- ------
------- -
--
---------------- -- ----------------对请求 URL 进行拼接
我们可以使用 query 方法来对请求 URL 进行拼接，例如：
request('https://jsonplaceholder.typicode.com/posts').query({ userId: 1 }).then(response => response.json());对请求进行缓存
我们可以使用缓存选项 cache 来配置请求缓存，例如：
request('https://jsonplaceholder.typicode.com/posts', {
cache: 'force-cache'
}).then(response => response.json());添加拦截器
我们可以使用 interceptors 的配置选项来添加请求拦截器和响应拦截器：
-- -------------------- ---- -------
----- ------------------ - ------- -- -
------ --------
--
----- ------------------- - -------- -- -
-- ---------------- --- ---- -
----- --- ----------------------
-
------ ---------
--
----------------------------------------------------- -
------------- - -------- ------------------- --------- ------------------- -
---------------- -- -----------------请求拦截器会在请求被发送到服务器前执行，称之为请求预处理，响应拦截器会在响应被传递给 then() 或 catch() 方法之前执行。
总结
fetchy-request 是一个优秀的 npm 包，它简化了 Fetch API 的调用过程，提供了更加直观和简洁的方法来请求数据。使用过程非常方便，但是这个 npm 包的调用方法和参数有些繁琐，有一定的学习曲线，但是掌握了之后将为你的开发提供巨大的便利性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69889