介绍
网络上的许多项目在其开发的某个阶段需要与 REST API 接口。 Axios是基于 Angular.js v1.x 内的 $http 服务的轻量级 HTTP 客户端,与原生 JavaScript Fetch API类似。
Axios是基于承诺的,这使您能够利用JavaScript的async和Wait来获得更可读的非同步代码。
您还可以拦截和取消请求,并且有内置的客户端保护,防止跨站点请求伪造。
在本文中,您将看到如何使用 Axios 在 React 应用程序中访问受欢迎的 JSON Placeholder API 的示例。
前提条件
要跟随这篇文章,您将需要以下内容:
- Node.js版本 10.16.0 安装在您的计算机上. 要在 macOS 或 Ubuntu 18.04 上安装此功能,请遵循 如何在 macOS 上安装 Node.js 并创建本地开发环境或 [如何在 Ubuntu 18.04 上安装 Node.js 上的 PPA 使用安装]部分中的步骤(https://andsky.com/tech/tutorials/how-to-install-node-js-on-ubuntu-18-04).
- 使用 Create React App 创建创建新 React 项目的步骤,如下 How to Set Up a React Project with Create React App教程 )。
本教程已通过 Node.js v16.13.1、npm v8.1.4、react v17.0.2 和 axios v0.24.0 进行验证。
<$>[info] 需要部署一个React项目并让它活着吗? 查看 DigitalOcean App Platform并在几分钟内直接从GitHub部署一个React项目。
步骤 1 – 将 Axios 添加到项目
在本节中,您将添加 Axios 到您创建的 React 项目,并按照 如何使用 Create React App 设置 React 项目教程。
1npx create-react-app react-axios-example
若要将 Axios 添加到项目中,请打开终端并更改项目中的目录:
1cd react-axios-example
然后运行此命令来安装 Axios:
1npm install [email protected]
接下来,您需要将 Axios 导入到您想要使用的文件中。
步骤2 – 提出GET请求
在此示例中,您创建一个新的组件,并导入 Axios 来发送GET请求。
在您的 React 项目中,您需要创建一个名为PersonList的新组件。
首先,在src目录中创建一个新的组件子目录:
1mkdir src/components
在此目录中,创建PersonList.js,并将以下代码添加到组件中:
1[label src/components/PersonList.js]
2import React from 'react';
3import axios from 'axios';
4
5export default class PersonList extends React.Component {
6 state = {
7 persons: []
8 }
9
10 componentDidMount() {
11 axios.get(`https://jsonplaceholder.typicode.com/users`)
12 .then(res => {
13 const persons = res.data;
14 this.setState({ persons });
15 })
16 }
17
18 render() {
19 return (
20 <ul>
21 {
22 this.state.persons
23 .map(person =>
24 <li key={person.id}>{person.name}</li>
25 )
26 }
27 </ul>
28 )
29 }
30}
首先,您导入 React 和 Axios 以便两者都可以在组件中使用,然后连接到componentDidMount生命周期链接并执行GET请求。
您使用 axios.get(url) 与 API 终端的 URL 来获得返回响应对象的承诺。
您还可以获取有关请求的其他信息,例如res.status下的状态代码或res.request内部的更多信息。
将此组件添加到您的app.js:
1[label src/app.js]
2import PersonList from './components/PersonList.js';
3
4function App() {
5 return (
6 <div ClassName="App">
7 <PersonList/>
8 </div>
9 )
10}
然后运行您的应用程序:
1npm start
在浏览器中查看应用程序. 你将被呈现一个名单的10个名字。
步骤 3 – 提出POST请求
在此步骤中,您将使用 Axios 与另一种 HTTP 请求方法,称为POST。
在您的 React 项目中,您需要创建一个名为PersonAdd的新组件。
创建PersonAdd.js并添加以下代码来创建允许用户输入的表单,然后将内容POST到API:
1[label src/components/PersonAdd.js]
2import React from 'react';
3import axios from 'axios';
4
5export default class PersonAdd extends React.Component {
6 state = {
7 name: ''
8 }
9
10 handleChange = event => {
11 this.setState({ name: event.target.value });
12 }
13
14 handleSubmit = event => {
15 event.preventDefault();
16
17 const user = {
18 name: this.state.name
19 };
20
21 axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
22 .then(res => {
23 console.log(res);
24 console.log(res.data);
25 })
26 }
27
28 render() {
29 return (
30 <div>
31 <form onSubmit={this.handleSubmit}>
32 <label>
33 Person Name:
34 <input type="text" name="name" onChange={this.handleChange} />
35 </label>
36 <button type="submit">Add</button>
37 </form>
38 </div>
39 )
40 }
41}
在handleSubmit函数中,您可以防止表单的默认操作,然后将状态更新为用户输入。
使用POST为您提供相同的响应对象,其中包含您可以在然后呼叫中使用的信息。
要完成POST请求,您首先捕获用户输入,然后将输入添加到POST请求中,该请求将为您提供回复,然后您可以console.log响应,该请求应显示表单中的用户输入。
将此组件添加到您的app.js:
1[label src/app.js]
2import PersonList from './components/PersonList';
3import PersonAdd from './components/PersonAdd';
4
5function App() {
6 return (
7 <div ClassName="App">
8 <PersonAdd/>
9 <PersonList/>
10 </div>
11 )
12}
然后运行您的应用程序:
1npm start
在浏览器中查看应用程序. 您将收到新用户提交表单. 提交新用户后检查控制台。
步骤 4 – 提出删除请求
在本示例中,您将看到如何使用axios.delete从 API 删除项目并将 URL 作为参数。
在您的 React 项目中,您需要创建一个名为PersonRemove的新组件。
创建PersonRemove.js,并添加以下代码来删除用户:
1[label src/PersonRemove.js]
2import React from 'react';
3import axios from 'axios';
4
5export default class PersonRemove extends React.Component {
6 state = {
7 id: ''
8 }
9
10 handleChange = event => {
11 this.setState({ id: event.target.value });
12 }
13
14 handleSubmit = event => {
15 event.preventDefault();
16
17 axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
18 .then(res => {
19 console.log(res);
20 console.log(res.data);
21 })
22 }
23
24 render() {
25 return (
26 <div>
27 <form onSubmit={this.handleSubmit}>
28 <label>
29 Person ID:
30 <input type="number" name="id" onChange={this.handleChange} />
31 </label>
32 <button type="submit">Delete</button>
33 </form>
34 </div>
35 )
36 }
37}
再次,res对象为您提供有关请求的信息,然后在提交表单后,您可以在console.log中重新提交该信息。
将此组件添加到您的app.js:
1[label src/app.js]
2import PersonList from './components/PersonList';
3import PersonAdd from './components/PersonAdd';
4import PersonRemove from './components/PersonRemove';
5
6function App() {
7 return (
8 <div ClassName="App">
9 <PersonAdd/>
10 <PersonList/>
11 <PersonRemove/>
12 </div>
13 )
14}
然后运行您的应用程序:
1npm start
在浏览器中查看应用程序. 您将收到删除用户的表格。
步骤 5 — 在 Axios 中使用 Base 实例
在本示例中,您将看到如何设置一个 _base 实例,在其中您可以定义 URL 和任何其他配置元素。
创建一个名为api.js 的单独文件:
1nano src/api.js
导出具有这些默认值的新axios实例:
1[label src/api.js]
2import axios from 'axios';
3
4export default axios.create({
5 baseURL: `http://jsonplaceholder.typicode.com/`
6});
一旦设置了默认实例,则可以在PersonRemove组件中使用。
1[label src/components/PersonRemove.js]
2import React from 'react';
3
4import API from '../api';
5
6export default class PersonRemove extends React.Component {
7 // ...
8
9 handleSubmit = event => {
10 event.preventDefault();
11
12 API.delete(`users/${this.state.id}`)
13 .then(res => {
14 console.log(res);
15 console.log(res.data);
16 })
17 }
18
19 // ...
20}
由于 http://jsonplaceholder.typicode.com/ 现在是基本 URL,因此您不需要每次想要在 API 上打击不同的端点时输入整个 URL。
步骤 6 – 使用async和等待
在本示例中,您将看到如何使用async和Wait来处理承诺。
等待关键字解决了承诺并返回了值。
1[label src/components/PersonRemove.js]
2import React from 'react';
3
4import API from '../api';
5
6export default class PersonRemove extends React.Component {
7 // ...
8
9 handleSubmit = event => {
10 event.preventDefault();
11
12 const response = await API.delete(`users/${this.state.id}`);
13
14 console.log(response);
15 console.log(response.data);
16 }
17
18 // ...
19}
在此代码样本中,代替了 .then(),解决了 promise,并将值存储在 response 变量中。
结论
在本教程中,您探索了如何在React应用程序中使用Axios来创建HTTP请求和处理响应的几个例子。
如果您想了解更多关于 React 的信息,请参阅 如何在 React.js 中编码系列,或参阅 React 主题页面以获取更多练习和编程项目。