许多 Web 应用程序在开发过程中的某个阶段都需要与 REST API 进行交互。对于 React 架构的 Web 应用程序，我们可以使用 Axios，这是一个轻量级的 HTTP 客户端，基于 $http Angular.js v1.x 中的服务。其功能类似于 JavaScript’s 原生的 Fetch API.
Axios 是基于 promise 的，这使我们能够结合 JavaScript 的 async 和 await 以编写更具可读性的同步代码。它还支持拦截和请求取消。此外，它还内置了针对跨站请求伪造的客户端保护。
在本指南中，我们将展示 如何使用 Axios 访问流行的 JSON Placeholder API，在一个 React 演示应用程序中。您可以通过此教程了解更多关于 JavaScript 中的 JSON 格式.
前提条件
要完成本指南中演示的步骤，您需要以下组件：
- 一台配置妥当的 Ubuntu 服务器。以下是 在 CloudSigma 上设置您自己的 Ubuntu 服务器的步骤.
- 已安装最新版本的 Node.js 。查看 如何在 Ubuntu 上安装 Node.js.
- 一个使用 Create React App 创建的新 React 项目。首先遵循并执行此 关于使用 Create React App 设置 React 项目的指南会很有帮助.
- 对 HTML, CSS 和 JavaScript.
步骤 1：在 React 项目中安装 Axios
Axios 可以直接作为 npm 模块使用。查看 npm 上的 Axios。我们只需要建立一个 React 项目并安装 Axios 包。
以下 npx 命令将运行 create-react-app 来创建一个新的 React 项目。项目名称将用于为该项目创建一个专用目录。在这里，我们将项目命名为 react-axios-demo。运行以下命令：
|
1 |
npx create-react-app react-axios-demo |
将当前目录更改为新创建的项目目录：
|
1 |
cd react-axios-demo/ |
接下来，调用 npm install 命令来安装 Axios。如果没有指定版本，那么 npm 将自动下载并安装最新版本的 Axios：
|
1 |
npm install axios |
我们的项目现在已经准备好使用 Axios 了！是时候将其功能付诸行动了。
步骤 2：构建 GET 请求
在这一步中，我们将展示如何创建一个使用 Axios 发送 GET 请求的新组件。
首先，创建一个新的组件 PersonList ，用于显示姓名列表。创建一个专用目录来存储该组件：
|
1 |
mkdir -pv src/components |
接下来，创建文件 PersonList.js :
|
1 |
touch PersonList.js |
在文本编辑器中打开该文件。为了舒适和可读性，我们使用的是 Visual Studio Code 。输入以下 JavaScript 代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import React from 'react'; import axios from 'axios'; export default class PersonList extends React.Component { state = { persons: [] } componentDidMount() { axios.get(`https://jsonplaceholder.typicode.com/users`) .then(res => { const persons = res.data; this.setState({ persons }); }) } render() { return ( <ul> { this.state.persons .map(person => <li key={person.id}>{person.name}</li> ) } </ul> ) } } |
在这里：
-
我们导入了 React 和 Axios，以便我们可以在组件中同时使用它们。
-
我们挂载到 componentDidMount 生命周期钩子并发送一个 GET 请求。
您可以使用 axios.get(<url>) 从 API 端点获取一个 promise（返回一个响应对象）。在响应对象中，包含所需的数据。然后我们将其分配给 的值。person。我们还可以收集有关请求的其他信息，例如在 下的状态码res.status 或来自 的更多信息res.request.
接下来，我们需要将组件添加到主 App.js 文件中。添加以下代码：
|
1 2 3 4 5 6 7 8 9 |
import PersonList from './components/PersonList.js'; function App() { return ( <div ClassName="App"> <PersonList/> </div> ) } |
该步骤的配置已完成。您现在可以运行该应用程序并使用您喜欢的浏览器进行测试。启动开发服务器：
|
1 |
npm start |
正如我们所见，输出以随机顺序显示了人员姓名列表：
步骤 3：构建 POST 请求
在本节中，我们将展示如何使用 Axios 执行另一个名为 POST 的 HTTP 请求方法。为了演示这一点，我们的目标是在我们的 React 项目中创建一个名为 PersonAdd.
的新组件。创建文件 PersonAdd.js:
|
1 |
touch src/components/PersonAdd.js |
然后，在文本编辑器中打开该文件并输入以下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React from 'react'; import axios from 'axios'; export default class PersonAdd extends React.Component { state = { name: '' } handleChange = event => { this.setState({ name: event.target.value }); } handleSubmit = event => { event.preventDefault(); const user = { name: this.state.name }; axios.post(`https://jsonplaceholder.typicode.com/users`, { user }) .then(res => { console.log(res); console.log(res.data); }) } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label> 人员姓名: <input type="text" name="name" onChange={this.handleChange} /> </label> <button type="submit">添加</button> </form> </div> ) } } |
在这段代码中，我们获取用户输入并将内容 POST 到 API。在 handleSubmit 函数内部，我们阻止了表单的默认操作，并将状态更新为用户输入。当使用 POST 时，它会返回相同的响应对象。我们可以在 then 调用中使用该对象。为了完成 POST 请求，我们捕获用户输入并将其与 POST 请求一起发送。它会给我们一个响应。我们使用 console.log 记录响应。它应该在表单中显示 user 输入。
接下来，将组件添加到 App.js 中。完整代码应该如下所示：
|
1 2 3 4 5 6 7 8 9 10 11 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> </div> ) } |
现在，是时候测试更改了。启动开发服务器：
|
1 |
npm start |
在 Web 浏览器上查看更改：
步骤 4：构建 DELETE 请求
在本节中，我们将演示如何在 axios.delete 的帮助下从 API 中删除项目，并使用 URL 作为参数。为了演示，创建组件 PersonRemove。创建文件 PersonRemove.js，位于 src/components 目录中：
|
1 |
touch src/components/PersonRemove.js |
之后，在文本编辑器中打开该文件并添加以下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React from 'react'; import axios from 'axios'; export default class PersonRemove extends React.Component { state = { id: '' } handleChange = event => { this.setState({ id: event.target.value }); } handleSubmit = event => { event.preventDefault(); axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label> 人员 ID: <input type="number" name="id" onChange={this.handleChange} /> </label> <button type="submit">删除</button> </form> </div> ) } } |
在这里， res 对象提供了有关请求的信息。然后我们可以在表单提交后使用 console.log。
接下来，将该组件实现到 App.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; import PersonRemove from './components/PersonRemove'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> <PersonRemove/> </div> ) } |
是时候再次测试我们的代码了。启动服务器：
|
1 |
npm start |
您应该会看到一个新表单，该表单获取用户的姓名并将其从列表中删除：
第 5 步：在 Axios 中应用基本实例
现在，我们将使用 Axios 基本实例。在这里，我们可以定义一个 URL 和其他配置元素。要实现它，请创建一个单独的文件 api.js:
|
1 |
touch src/api.js |
在文本编辑器中打开它并输入以下代码：
|
1 2 3 4 5 |
import axios from 'axios'; export default axios.create({ baseURL: `http://jsonplaceholder.typicode.com/` }); |
设置完成后，我们就可以在 PersonRemove 组件中使用它。代码如下所示：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); API.delete(`users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } } |
在这里，http://jsonplaceholder.typicode.com/ 被设置为基本 URL。现在，我们不再需要在每次访问 API 端点时都使用完整 URL。
Step 6: Implement async and await
在本节中，我们将了解如何实现 async 和 await 来处理 promise。 await 关键字会解析 promise 并返回 value。我们可以将此 value 赋值给一个变量，以便更方便地使用。
以下是更新后的 PersonRemove.js 代码：
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); const response = await API.delete(`users/${this.state.id}`); console.log(response); console.log(response.data); } } |
在这里，我们替换了 .then()。一旦 promise 被解决，我们将值存储在变量 response.
总结
在本教程中，我们探索了使用 Axios 处理 REST API 的各种示例。这些代码展示了如何创建 HTTP 请求和处理响应。
有兴趣学习更多关于 JavaScript 的知识吗？查看我们关于各种 JavaScript 概念和特性的其他初学者指南，例如 日期和时间, 字符串操作, 类，以及 对象.
祝您编程愉快！
评论
暂无评论。发表第一条评论吧。