在 React 中使用 Axios 轻松获取数据

介绍

几个月前，我开始了一个 React 项目，当时我还是个新手。我需要从服务器获取数据，但在尝试通过 API 获取数据时遇到了一些困难。经过一番研究和实践，我理解了这个概念，并能够在其他项目中获取数据。我的目标是指导你如何开始使用 Axios，并理解必要的基本知识，以免陷入困境。读完本文后，你将能够从服务器获取数据并提交数据。

先决条件

该项目应用使用 Material UI 和 React 构建。了解一些 React 知识会有所帮助。

什么是 Axios？

Axios 是一个第三方 JavaScript 库。Axios 是一个基于 Promise 的 HTTP 客户端，易于浏览器和 Node.js 使用。

Axios 是一个基于 Promised 的 JavaScript 库，用于发送 HTTP 请求。你可以将其视为 JavaScript 原生 fetch() 函数的替代品。

Axios 是一个基于 Promise 的现代 HTTP 客户端库。这意味着 Axios 可用于发送 HTTP 请求并处理其响应，所有这些都使用 JavaScript 的 Promise。Axios 在浏览器中同时支持 Node.js 和 JavaScript。

Axios 的功能

• 从浏览器发出 XMLHttpRequest
• 从 node.js 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• JSON 数据的自动转换
• 客户端支持防范 XSRF

我们在哪里发出 http 请求？

在基于类的组件中，请求是在componentDidMount()生命周期中发出的；而在函数式组件中，请求是在React 生命周期钩子（即 useEffect）中发出的。
要使用 Axios，需要在项目中安装 Axios，并将其导入到要获取数据的组件中。要使用我使用的 npm 安装 Axios，请在命令提示符中运行“ npm install axios
”。Axios 支持多种请求方法，例如 get、post、delete、put 等。
我们将重点关注常用的get 和 post 方法。

使用 Get 方法在 Axios 中获取数据

Axios 提供了一个带有至少一个参数（url）的 get 方法。

例如，让我们看看 axios 的实际作用：

axios.get(' ')
.then(response => {
console.log(response);
});

上面的代码是使用 axios 的简单 API 获取。现在，我们来解释一下：

Axios 使用承诺并返回承诺“then”，这是一种以函数作为输入的方法，一旦承诺解决，即当服务器的数据存在时，该函数就会被执行。

在代码中，我们创建了一个箭头函数，用于从服务器获取数据并将其传递给名为 getRepo 的变量，并在生命周期钩子中调用它。第二个参数 [ ] 是一个空数组，因此生命周期钩子只运行一次。

在从 API 返回的响应中，我们只需要显示数据，这就是我们将 response.data 存储在 myRepo 容器中然后将其传递给状态的原因。

上图展示了获取的数据如何在我的组件中被消费或使用。由于返回的数据是一个数组，我们通过该数组进行映射，获取想要显示的数据，并将其显示在相应的元素上。

输出将是：

错误处理

如果我们出现网络故障或者 URL 出现错误，我们该如何处理这个错误？

要处理此错误，请在 then 方法之后添加一个 catch 方法来捕获您遇到的任何错误。

.catch ((错误) {
console.log(错误)
});

输出：错误得到正确处理

使用 async/await 函数从服务器获取数据的另一种方法

要使用 async/await 语法，我们需要将 axios.get() 函数调用包装在一个异步函数中。我们将方法调用包裹在 try…catch 块中，以便捕获任何错误。接收 http 数据的变量“response”必须使用 await 来确保异步数据已接收，然后才能继续执行。

如何将数据发布到服务器

Post 方法接受 URL 作为输入，但还需要第二个参数，即要发送的数据。您还可以传递第三个参数来配置请求。您可以监听请求并将其打印到控制台中。
以下代码是使用 async/await 函数发送数据的另一种方法。

结论

在本文中，您学习了如何使用 axios（fetch 的替代方案）向服务器发出 http 请求，并且能够使用 Promise 和 async/await 从服务器获取数据以及将数据发布到服务器，这是一个很好的开始。我相信本文会让您的 axios 之旅更加愉快。欢迎您随时练习所学知识，并探索其他 axios 请求方法。