npm 包 @http/fetch 使用教程
在前端开发中，网络请求是必不可少的一部分。而使用原生的 XMLHttpRequest 却存在一些问题，比如使用繁琐、兼容性差等等。这时候，我们可以选择使用 @http/fetch 这个 npm 包来发送网络请求。
安装
使用命令行工具，输入以下代码进行安装：
npm install @http/fetch
在你的代码中引入该模块：
import fetch from '@http/fetch';
使用
@http/fetch 简化了发送网络请求的过程，只需要传入一个 URL，并将响应转换成 JSON 格式，就可以直接拿到数据。
-- -------------------- ---- -------
----- ------- - ----- -- -- -
--- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
--更多选项
@http/fetch 提供了更多可选的选项，以满足不同的需求。
设置请求方法
默认情况下，fetch 会使用 GET 方法发送请求。但可以通过第二个参数，来设置其他的请求方法，如 POST、PUT、DELETE 等。
-- -------------------- ---- -------
----- -------- - ----- -- -- -
--- -
----- -------- - ----- ------------------------------------- -
------- -------
----- ---------------- ------ ------ ---
---
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
--设置请求头部
可以通过第二个参数，来设置请求头部。默认情况下，fetch 会添加一个 Content-Type 为 text/plain;charset=UTF-8 的请求头。
-- -------------------- ---- -------
----- -------- - ----- -- -- -
--- -
----- -------- - ----- ------------------------------------- -
------- -------
-------- -
--------------- -------------------
--
----- ---------------- ------ ------ ---
---
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
--设置超时时间
可以通过第二个参数，来设置请求的超时时间。默认情况下，fetch 不会设置超时。
-- -------------------- ---- -------
----- ------------------ - ----- -- -- -
--- -
----- -------- - ----- ------------------------------------- -
-------- -----
---
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
--设置缓存模式
可以通过第二个参数，来设置请求的缓存模式。默认情况下，fetch 不会缓存请求。
-- -------------------- ---- -------
----- ---------------- - ----- -- -- -
--- -
----- -------- - ----- ------------------------------------- -
------ -----------
---
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
--总结
@http/fetch 提供了一种简单、便捷、快速的方式来发送网络请求，节省了我们使用原生 XMLHttpRequest 的时间和兼容性问题。同时，它也提供了更多的选项，以适应不同的需求。如果你需要发送网络请求，@http/fetch 绝对是一个值得尝试的选择。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------------
----- ------- - ----- -- -- -
--- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
--
----- -------- - ----- -- -- -
--- -
----- -------- - ----- ------------------------------------- -
------- -------
----- ---------------- ------ ------ ---
---
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
--
----- -------- - ----- -- -- -
--- -
----- -------- - ----- ------------------------------------- -
------- -------
-------- -
--------------- -------------------
--
----- ---------------- ------ ------ ---
---
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
--
----- ------------------ - ----- -- -- -
--- -
----- -------- - ----- ------------------------------------- -
-------- -----
---
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
--
----- ---------------- - ----- -- -- -
--- -
----- -------- - ----- ------------------------------------- -
------ -----------
---
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bbd967216659e244121