在前端开发中，我们经常会需要使用远程的 API 接口，一般会使用 Fetch 或者 Ajax 来发送请求获取数据。但是在实际项目中，我们还需要为这些请求设置请求头，处理响应结果等功能。这时候，我们可以使用 proto-fetch 这个 npm 包来简化我们的开发工作。
什么是 proto-fetch？
proto-fetch 是一个跨平台的 HTTP 请求库，可以在浏览器和 Node.js 中使用。它支持一个简单的 API，同时还提供了一些便利的功能，如自动设置请求头、请求拦截、响应拦截等功能。
如何安装 proto-fetch？
将 proto-fetch 安装到项目中，可以通过 npm 命令来完成。在项目目录下打开终端，输入以下命令：
npm install proto-fetch --save
proto-fetch 的使用教程
基本使用
在使用 proto-fetch 发送请求之前，需要引入 proto-fetch：
import ProtoFetch from 'proto-fetch';
然后，我们就可以使用 ProtoFetch 实例中的方法来发送请求了。比如：
const http = new ProtoFetch();
http.get('https://jsonplaceholder.typicode.com/users/1').then((response) => {
console.log(response.data);
});这样，我们就可以在控制台输出获取到的响应结果了。
设置请求头
要在请求中添加请求头，我们可以使用 interceptors 属性中的 request 方法。比如，设置一个 token 的请求头：
http.interceptors.request.use((config) => {
config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
return config;
});这样，我们发送的每一次请求都会自动携带上这个请求头。
设置响应拦截器
发送请求之后，我们可以使用响应拦截器来对响应结果进行统一处理。比如，对响应结果进行统一的错误处理：
-- -------------------- ---- -------
----------------------------------------- -- -
-- ---------------- --- ---- -
------ --------------
-
------ ------------------------
-- ------- -- -
------ ----------------------
---此时在 console 中打印的结果，将会包含我们处理好的响应数据。
示例代码
-- -------------------- ---- -------
------ ---------- ---- --------------
----- ---- - --- -------------
-- -----
-------------------------------------- -- -
------------------------------- - ------- - - ------------------------------
------ -------
---
-- -------
----------------------------------------- -- -
-- ---------------- --- ---- -
------ --------------
-
------ ------------------------
-- ------- -- -
------ ----------------------
---
-- ----
------------------------------------------------------------------------ -- -
----------------------
---------------- -- -
-------------------
---结论
通过学习可以知道，proto-fetch 是一款超级实用的请求库，它可以帮助我们更加高效地发送请求并进行简单的请求设置，相信它在你的项目中也会有出色的表现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005642c81e8991b448e1584