介绍
在前端开发中，需要使用到许多的 npm 包来方便开发。@etereo/http 是一个基于 axios 封装的 http 请求库，实现了一些特别方便的功能。它封装了 axios 的所有功能，除此之外还实现了如下功能：
- 二次封装请求，只要一行代码即可发送请求
- 自动处理请求结果
- 请求失败自动弹出消息框提示用户
- 统一处理请求头和请求参数
在典型的应用中，使用 @etereo/http 可以减少大量重复的请求编写工作，节约开发时间，提升开发效率。
安装
您可以使用以下命令安装 @etereo/http：
npm install @etereo/http
快速开始
了解了 @etereo/http 的基本概念后，我们很快就可以利用它的 API 写出 HTTP 请求。下面提供一些示例，展示如何使用 @etereo/http 进行 HTTP 请求。
GET 请求
使用 http.get() 函数发送 GET 请求，它可以写得类似这样：
-- -------------------- ---- -------
------ ---- ---- ---------------
------------------------
---------------- -- -
------------------------ ----------
--
-------------- -- -
----------------------- -------
---POST 请求
使用 http.post() 函数发送 POST 请求，它可以写得如下：
-- -------------------- ---- -------
------ ---- ---- ---------------
------------------ -
--- ---
--
---------------- -- -
------------------------ ----------
--
-------------- -- -
----------------------- -------
---PUT 请求
使用 http.put() 函数发送 PUT 请求，它可以写得如下：
-- -------------------- ---- -------
------ ---- ---- ---------------
----------------- -
--- ----
----- ------
--
---------------- -- -
------------------------ ----------
--
-------------- -- -
----------------------- -------
---DELETE 请求
使用 http.delete() 函数发送 DELETE 请求，它可以写得如下：
-- -------------------- ---- -------
------ ---- ---- ---------------
---------------------------
---------------- -- -
------------------------ ----------
--
-------------- -- -
----------------------- -------
---配置
在 @etereo/http 的 API 中，还支持对 axios 的一些配置进行更改。HTTP 请求需要注意的几个方面：请求参数、消息头、响应内容、错误处理等。@etereo/http 提供了丰富的配置选项，可以满足不同项目的需求。配置可以在全局上进行，也可以在每次请求时动态配置。
以下是一个全局配置的示例：
import http from '@etereo/http';
http.defaults.baseURL = 'https://api.example.com/';
http.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('jwt');以上配置不仅仅是对某个请求的配置，而是对所有请求进行的相同配置。这对于一个网站的全局相关性非常有用。有关配置的详细信息，请查阅官方文档。
探索更多
到目前为止，您应该已经了解了 @etereo/http 的简单使用。您可以在文档中找到更多信息。此外，这里还有一些示例代码可以帮助您更深入地了解如何使用 @etereo/http。
应用配置
import http from '@etereo/http';
http.defaults.baseURL = 'https://api.example.com';
http.defaults.timeout = 10000;
http.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('jwt');
export default http;拦截器
-- -------------------- ---- -------
------ ---- ---- ---------------
------------------------------
-------- -- -
-------------------------- - ------
------ -------
--
------- -- -
------ ----------------------
-
--
-------------------------------
---------- -- -
-- ------------------- --- ---- -
------ -------------------
- ---- -
------ ------------------------------
-
--
------- -- -
------ ----------------------
-
--
------ ------- -----动态添加请求头
-- -------------------- ---- -------
------ ---- ---- ---------------
----- ----- - ----------------------------
----- ------- - -
-------------- ------- ---------
--
------------------ ----- ----------
---------------- -- -
---------------------------
--
-------------- -- -
---------------------
---发送 BLOB 数据
-- -------------------- ---- -------
------ ---- ---- ---------------
----- ---- - --- ------------ -------- ------ ---------------
----- ---- - --- -----------
------------------- ----- ------------
------------------ -----
---------------- -- -
---------------------------
--
-------------- -- -
---------------------
---结论
这篇文章介绍了 npm 包 @etereo/http 的使用方法，它是一个基于 axios 封装的请求库。它比 axios 更好用，支持以下特性：
- 二次封装请求，只要一行代码即可发送请求
- 自动处理请求结果
- 请求失败自动弹出消息框提示用户
- 统一处理请求头和请求参数
可以使用它快速简便地进行 HTTP 请求，节约时间和提升开发效率，而不是写一大堆键盘敲击。无论你是新手或者是有经验的前端工程师，@etereo/http 都是你值得去尝试的一个 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590f81e8991b448d67d8