在前端开发中，频繁地向后端发送异步请求是不可避免的。而 Axios 是一个比较流行的轻量级 HTTP 客户端，提供了向后端发送请求的接口函数，也很好地支持了一些开发者感兴趣的特性，如 CSRF 防护、响应拦截等等。在 React 中使用 Axios 几乎也是最受欢迎和普遍的方式之一。
在本文中，我们将会学习如何在 React 应用中使用 Axios 进行数据请求，并提供一些实例代码和说明，方便读者吸收和学习。
安装和使用
Axios 可以通过 NPM 安装，执行如下命令：
--- ------- -----
安装结束后，在 React 组件中导入 Axios：
------ ----- ---- --------
之后，就可以使用 Axios 向后端发送请求了，假设我们要获取一个 RESTful API 的响应数据，可以使用 Axios 的 get 方法：
-------------------------
--------- -- -
----------------------
---这段代码将会发送一个 GET 请求，请求 URL 为 http://localhost:3000/api/getData（默认端口号为 3000），并在请求成功后将响应数据打印在控制台中。
基本配置项
在使用 Axios 发送请求时，可能需要指定一些参数和配置项，例如请求 URL、请求方法、请求头等等。以下是最基本的 Axios 请求配置项：
url：请求的 URL。method：请求的方法（默认为 GET）。data：请求的数据。headers：请求头。
接下来将会介绍这些配置项。
请求 URL
Axios 只需要传入 URL 来发起请求，请求 URL 的格式应该是一个合法的 URL 字符串，例如：
----------------------------------------------
--------- -- -
----------------------
---在一些更复杂的应用场景下，可能需要动态地构建请求 URL，可以在 URL 字符串中使用占位符 {}，然后在配置项中使用 params 属性来指定值：
--------------------------------- -
------- -
--- -
-
--
--------- -- -
----------------------
---Axios 会将 params 属性自动拼接成 URL 查询字符串的形式，然后附加在 URL 末端。
请求方法
如果使用默认请求方法，那么 Axios 可以简单地使用 axios.post(url, data) 或 axios.get(url, config) 方法。但在一些复杂的应用场景中，可能需要使用其他请求方法，例如 PUT、PATCH、DELETE 等等。这些请求方法都和 GET、POST 的用法类似，只需要将方法名替换到第一个参数即可，例如：
------------------------- -
----- ----- -----
------ ----------------------
--
--------- -- -
----------------------
---在使用其他请求方法时，可以通过配置项中的 method 属性指定请求方法：
-------
------- -------
---- -------------
----- -
----- ----- -----
------ ----------------------
-
--
--------- -- -
----------------------
---请求数据
如果请求中需要传递数据，需要将数据传递给 Axios，比如传递 JSON 数据，可以使用 Axios 的 data 配置项，例如：
------------------------ -
----- ----- -----
------ ----------------------
--
--------- -- -
----------------------
---在这个例子中，Axios 会自动把数据序列化为 JSON，并添加到请求正文中。
如果想发送一个表单数据，则需要转换成 URL 编码格式，可以使用 URLSearchParams 对象来完成：
----- -------- - --- ------------------
----------------------- ----- ------
------------------------ ------------------------
------------------------ ---------
--------- -- -
----------------------
---当然，也可以将表单数据转换成对象，并使用 Axios 的 params 属性：
----- -------- - -
----- ----- -----
------ ----------------------
--
------------------------ ----- -
------- ---------
-------- -
--------------- -----------------------------------
-
--
--------- -- -
----------------------
---在这个例子中，需要注意的是，由于 application/x-www-form-urlencoded 是表单默认的 Content-Type 值，需要将其设置在请求头中。
请求头
Axios 支持自定义请求头，例如设定 content-type 为 application/json 头文件属性，可以使用 Axios 的 headers 配置项，例如：
------------------------ -
----- ----- -----
------ ----------------------
-- -
-------- -
--------------- ------------------
-
--
--------- -- -
----------------------
---在这个例子中，Axios 会自动将数据序列化为 JSON 格式，并发送到后台服务器。
请求拦截器
Axios 支持请求拦截器（request interceptor）和响应拦截器（response interceptor），这两个拦截器可以在请求和响应过程中拦截并修改请求和响应数据，也可以进行错误统一处理。在本节中，我们将会看到请求拦截器的用法。
Axios 可以使用 axios.interceptors.request.use 方法来配置请求拦截器，在所有的请求中都会被调用，例如实现 CSRF 防护：
------------------------------------- -- - ----- --------- - --------------- ------------------------------ - ---------- ------ ------- ---
在这个例子中，我们向每个请求中添加了一个 X-CSRF-Token 头文件属性，以配合后端进行 CSRF 防护。
响应拦截器
与请求拦截器类似，Axios 也支持响应拦截器，在每个响应中都会被调用，例如：
--------------------------------
--- -- -
----------------------
------ ----
--
--- -- -
-------------------------------
------ ----------------------------------
-
--在这个例子中，我们使用了 axios.interceptors.response.use 方法来定义了一个成功处理函数和一个失败处理函数。Axios 会自动选择对应的回调，例如在 HTTP 响应发送成功后打印响应数据；在服务器返回错误状态码时，打印错误信息并 reject Promise。
封装请求函数
在复杂的应用场景中，需要反复定义多个 Axios 请求，这样可能很琐碎且不利于维护。可以尝试将 Axios 请求的功能封装成函数，来使得调用变得更为简洁和工整。例如：
-- ------
------ ----- ---- --------
------ -------- ----------- -
------ ----------------------
--------- -- -
------ ---------
---
-使用 fetchData 函数前，需要先导入 Axios：
------ ----- ---- --------
------ - -- --- ---- --------
---------------
---------- -- -
------------------
---总结：
在 React 应用中使用 Axios 进行数据请求是一种普遍的方式，凭借着其便捷和方便性，成为了前端开发中的基本元素之一。本文中，我们讲到了 Axios 的各种特性以及使用方法，始终保证 Axios 的正确性与简单性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6656f310d3423812e4c05154