在 React 单页应用（SPA）中，很多情况下需要使用弹窗提示来给用户反馈信息。而在与后端交互的过程中，我们通常使用 axios 来完成 AJAX 请求。在本文中，我们将介绍如何使用 axios 实现 React SPA 应用中的弹窗提示功能。
1. 安装 axios
在使用 axios 之前，我们需要先安装它。可以使用npm安装，命令如下：
npm install axios --save
或者使用 yarn 安装：
yarn add axios
2. 在 React SPA 中使用 axios 发送请求
使用 axios 发送请求非常简单，我们只需要引入 axios，并使用它的 get 或 post 方法即可。例如，我们可以在组件的 componentDidMount 方法中发送一个 GET 请求：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- --------
----- ----------- ------- --------------- -
------------------- -
----------------------
-------------- -- -
---------------------------
--
------------ -- -
-------------------
---
-
-------- -
------ ---------------
-
-当然，我们也可以使用 post 方法发送 POST 请求：
-- -------------------- ---- ------- ----------------------- - ----- ----- ---- -- -- -------------- -- - --------------------------- -- ------------ -- - ------------------- ---
3. 在 axios 中拦截请求
在大部分 SPA 应用中，用户在跨页面之间进行操作，例如登录注册，改变购物车中商品数量等。如果在这些操作中，发生错误时我们希望提示给用户相关信息，而不是简单地将错误控制台输出的操作。这时我们可以使用 axios 拦截器实现这个功能。
3.1 拦截请求
可以使用 axios 的 interceptors.request 方法来拦截请求。在拦截器中，我们可以在请求发送前添加通用参数或者请求头，或者对请求进行任何形式上的处理，如下所示：
axios.interceptors.request.use(config => {
// 在请求发送前做一些处理
return config;
}, error => {
// 请求错误时做一些处理
return Promise.reject(error);
});以上例子中，我们使用了 interceptors.request.use 方法添加了一个请求拦截器，其中 config 是一个包含所有请求选项的对象。在这个拦截器中，我们可以更改这个对象并返回它，以使得更改将反映在后续的请求中。
3.2 拦截响应
和拦截请求类似，可以使用 interceptors.response 方法来拦截响应。在拦截器中，我们可以修改响应数据、响应状态码，甚至是抛出一个错误等等，如下所示：
axios.interceptors.response.use(response => {
// 在响应数据返回之前做一些处理
return response;
}, error => {
// 当请求错误时做一些处理
return Promise.reject(error);
});以上例子中，我们使用了 interceptors.response.use 方法添加了一个响应拦截器，其中 response 是一个包含响应状态码、响应头以及响应数据等内容的对象。我们可以在拦截器中修改这个对象，并且需要将其返回，否则响应数据不会被返回。
4. 在拦截器中实现弹窗提示
在前面的章节中，我们已经介绍了如何使用 axios 拦截器来处理请求和响应。这里我们再来看一下如何在拦截器中实现弹窗提示。
当请求失败时，我们想要提示用户一个错误信息，这时可以在 interceptors.response 拦截器中添加一些逻辑来显示一个提示框。
-- -------------------- ---- ------- ---------------------------------------- -- - -- -------------- ------ --------- -- ----- -- - -- ----------- ----- ------- - --------------------------- -- ---------- --------------- ------ ---------------------- ---
以上例子中，在响应出现错误时，我们使用 alert 方法来显示一个提示框，并且将错误信息作为提示框的消息内容。
在实际开发中，我们可能会使用一些高级的弹窗库（如 antd）来实现更为复杂的提示框。不过，大体的原理和步骤都是类似的。
5. 总结
通过本文，我们学习了如何使用 axios 在 React SPA 中发送 AJAX 请求，并使用拦截器实现弹窗提示功能。使用 axios 发送 AJAX 请求可以更方便的与后端进行交互，而使用拦截器可以更加灵活的处理请求和响应，增加了应用的可扩展性。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492e68548841e98940b1b57