介绍
req-ajax 是一款轻量、便捷、快速的 Ajax 库，可用于发送 HTTP 请求。它支持 Promise 和 async/await 两种方式，可以让代码更加简洁明了。本文将详细介绍该 npm 包的使用方法，并提供示例代码。
安装
使用 npm 进行安装：
npm install req-ajax
或者使用 yarn：
yarn add req-ajax
使用
引入 req-ajax：
import reqAjax from 'req-ajax';
在请求方法中使用 reqAjax 方法：
reqAjax({
url: 'https://jsonplaceholder.typicode.com/posts/1',
method: 'GET',
}).then((response) => {
console.log(response);
});以上代码向 JSONPlaceholder 发送了一次 GET 请求，并将获取到的响应输出到控制台上。
接下来，我们将详细介绍该方法的参数。
参数
reqAjax 方法接受一个配置参数：
-- -------------------- ---- ------- - ---- --- -- -- --- ------- --- -- ---- -------- --- -- --- ------- --- -- --- -- ----- --- -- --- ---------------- ------ -- ---- ------------- ------- -- ---- ----------------------------------- -------- -- -- ---- -
URL
必选参数，表示请求的 URL 地址。
method
请求方法，可选值包括 GET、POST、PUT、DELETE、HEAD 等常见 HTTP 方法。
headers
请求头，可自定义设置。
示例：
-- -------------------- ---- ------- ----- ------- - - --------------- ------------------- -------------- ------- ---------- -- --------- ---- ----------------------------------------------- ------- ------ -------- ------------------ -- - ---------------------- ---
以上代码向 JSONPlaceholder 发送了一次带有自定义请求头的 GET 请求，并将获取到的响应输出到控制台上。
params
URL 参数，可自定义设置。
示例：
-- -------------------- ---- ------- ----- ------ - - --- -- -- --------- ---- --------------------------------------------- ------- ------ ------- ------------------ -- - ---------------------- ---
以上代码向 [JSONPlaceholder](https://jsonplaceholder.typicode.com/] 发送了一次带有 URL 参数的 GET 请求，并将获取到的响应输出到控制台上。
body
请求体，可自定义设置。
示例：
-- -------------------- ---- ------- ----- ---- - - ------ ------ ----- ------ ------- -- -- --------- ---- --------------------------------------------- ------- ------- ----- ------------------ -- - ---------------------- ---
以上代码向 [JSONPlaceholder](https://jsonplaceholder.typicode.com/] 发送了一次带有请求体的 POST 请求，并将获取到的响应输出到控制台上。
withCredentials
是否跨域（Cookie），可选值为 true 或 false。
示例：
reqAjax({
url: 'https://jsonplaceholder.typicode.com/posts',
method: 'GET',
withCredentials: true,
}).then((response) => {
console.log(response);
});以上代码向 [JSONPlaceholder](https://jsonplaceholder.typicode.com/] 发送了一次带有 Cookie 的 GET 请求，并将获取到的响应输出到控制台上。
responseType
响应类型，可包括 json、text、blob、arraybuffer、document 等常见响应类型。
示例：
reqAjax({
url: 'https://jsonplaceholder.typicode.com/posts/1',
method: 'GET',
responseType: 'text',
}).then((response) => {
console.log(response);
});以上代码向 [JSONPlaceholder](https://jsonplaceholder.typicode.com/] 发送了一次获取文本响应的 GET 请求，并将获取到的响应输出到控制台上。
timeout
超时时间，单位为毫秒，可自定义设置。
示例：
reqAjax({
url: 'https://jsonplaceholder.typicode.com/posts/1',
method: 'GET',
timeout: 3000,
}).then((response) => {
console.log(response);
});以上代码向 [JSONPlaceholder](https://jsonplaceholder.typicode.com/] 发送了一次超时时间为 3 秒的 GET 请求，并将获取到的响应输出到控制台上。
回调函数
reqAjax 方法返回一个 Promise，可以通过 .then() 或 async/await 的方式进行回调处理。
示例：
-- -------------------- ---- -------
---------
---- -----------------------------------------------
------- ------
------------------ -- -
----------------------
---
----- -------- ----------- -
----- -------- - ----- ---------
---- -----------------------------------------------
------- ------
---
----------------------
-
------------以上代码分别使用了 .then() 和 async/await 两种方式来处理返回的 Promise，并将获取到的响应输出到控制台上。
错误处理
当请求失败时，我们需要对错误进行处理。req-ajax 会将错误信息包含在 Promise.reject() 中，可以通过 .catch() 或 try...catch... 的方式来进行错误处理。
示例：
-- -------------------- ---- -------
---------
---- -------------------------------------------------
------- ------
------------------ -- -
----------------------
---------------- -- -
---------------------
---
----- -------- ----------- -
--- -
----- -------- - ----- ---------
---- -------------------------------------------------
------- ------
---
----------------------
- ----- ------- -
---------------------
-
-
------------以上代码分别使用了 .catch() 和 try...catch... 两种方式来处理请求失败时的错误，并将错误信息输出到控制台上。
示例代码
以下示例代码演示了 req-ajax 的具体应用。它使用了 React 框架来创建一个 Todo List，实现了添加、删除、更新和查询 Todo 的基本功能。其中，请求使用了 req-ajax 来发送 Ajax 请求。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ ------- ---- -----------
-------- ---------- -
----- ------- --------- - -------------
----- --------- ----------- - -------------
------------ -- -
-------------
-- ----
----- -------- ------------ -
--- -
----- -------- - ----- ---------
---- ---------------------------------------------
------- ------
---
------------------------
- ----- ------- -
---------------------
-
-
----- -------- --------- -
--- -
----- -------- - ----- ---------
---- ---------------------------------------------
------- -------
----- -
------ --------
------- --
---------- ------
--
---
------------------- ----------------
---------------
- ----- ------- -
---------------------
-
-
----- -------- -------------------- ---------- -
--- -
----- ---------
---- ---------------------------------------------------
------- ------
----- -
----------
--
---
---------
---------------- -- -
-- -------- --- --- -
------ -
--------
----------
--
-
------ -----
--
--
- ----- ------- -
---------------------
-
-
----- -------- -------------- -
--- -
----- ---------
---- ---------------------------------------------------
------- ---------
---
---------------------------- -- ------- --- -----
- ----- ------- -
---------------------
-
-
-------- ---------------- -
------ -
----
----------------- -- -
--- --------------
------
---------------
------------------------
----------------- -- -
------------------------- ----------------------
--
--
------------
------- ----------- -- --------------------------------
-----
---
-----
--
-
------ -
-----
-------- ---------
------ ----------- --------------- ----------------- -- ------------------------------- --
------- -----------------------------
------------------
------
--
-
------ ------- ---------以上代码演示了如何使用 req-ajax 来发送 HTTP 请求，并配合 React 框架来实现常见业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572f581e8991b448e91a8