fetch-send-request 是一个基于 fetch 封装的 npm 包，用于前端向后端发送请求。它便于处理返回的数据和异常情况，提高了代码的可读性和可维护性。
安装
使用 npm 安装 fetch-send-request：
npm install fetch-send-request
安装完毕后，在代码中引入：
import { sendRequest } from 'fetch-send-request';发送请求
在发送请求时，使用 sendRequest 函数。它的第一个参数是请求地址，第二个参数是请求配置对象。
sendRequest(url, options)
.then(response => {
// 处理返回数据
})
.catch(error => {
// 处理异常情况
});其中，response 是返回的数据对象，error 是发生异常的错误对象。
请求配置对象
可以通过配置对象来定制请求，常用的配置选项包括：
- method: 请求方法，可以是 GET、POST、PUT、DELETE 等，默认为 GET
- headers: 请求头，可以设置 Content-Type、Authorization 等
- body: 请求体，可以是普通文本或 JSON 字符串
- mode: 请求模式，可以是 "cors"、"no-cors" 或 "same-origin"，默认为 "cors"
- cache: 缓存模式，可以是 "default"、"no-store" 或 "reload"，默认为 "default"
例如，在发送一条 POST 请求时，可以这样配置请求对象：
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer ' + token,
},
body: JSON.stringify(data),
};返回数据处理
返回的数据对象包含了响应头和响应体，可以通过 response.ok 来判断请求是否成功，response.status 获取响应状态码，response.statusText 获取状态描述。
-- -------------------- ---- -------
---------------- --------
-------------- -- -
-- ------------- -
---------------------------- ---------------------
------------------------- -- -
-- ----- ---- --
---
- ---- -
---------------------------- ---------------------
-------------------------- -- -
-- ------
---
-
--
------------ -- -
-- ------
---异常处理
除了请求出错时会被 catch 捕获到以外，一些 HTTP 错误码也会被认为是请求异常，如 404 找不到资源、500 服务器内部错误等。在这些情况下，我们可以通过响应状态码来判断异常类型。
-- -------------------- ---- -------
---------------- --------
-------------- -- -
-- ------------- -
-- ------
- ---- -
---------------------------- ---------------------
-------------------------- -- -
-- ------
---
-
--
------------ -- -
-- ------
---示例代码
以下是一份使用 fetch-send-request 进行请求和异常处理的示例代码。
-- -------------------- ---- -------
------ - ----------- - ---- ---------------------
----- ------- - -
------- ------
-------- -
--------------- -------------------
--
--
------------------------------------------- --------
-------------- -- -
-- ------------- -
---------------------------- ---------------------
------------------------- -- -
-- ----- ---- --
---
- ---- -
---------------------------- ---------------------
-------------------------- -- -
-- ------
---
-
--
------------ -- -
-------------------- -------
---总结
fetch-send-request 是一个便捷易用的前端请求库，它基于 fetch 进行封装，提供了便利的请求配置和错误处理方式。使用它，我们可以更加轻松地发送请求，并处理它们返回的结果和异常情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d6581e8991b448db28c