React js教程（15）：HTTP 和React
本文是React 教程系列的一部分。您可以在此处找到本系列之前所有帖子的链接
介绍
在上一篇文章中，我们了解了 React 中 Render Props 和 Context 的概念。在本文中，我们将深入探讨 React 的一些高级概念，例如 HTTP 以及使用 GET 和 POST 方法进行数据检索。
HTTP 和 React 的基础知识
到目前为止，我们已经了解了 React 的基础知识以及如何使用 props 和 state。现在，我们将学习 React 如何通过 API 调用获取数据并在浏览器中显示。由于 React 只是一个用于用户界面的库，它只知道 Props 和 State，所以在这里，HTTP 出现了。
为了在 React 中获取数据，有许多可用的 HTTP 库，例如 Apollo、Axios、Relay Modern、Request 和 Superagent。在本文中，我们将使用 Axios 库。
首先，我们将使用以下命令创建一个新的 React 应用程序。
npx create-react-app http-react npm install axios 命令执行成功后，我们会在 package.json 文件中看到依赖更新了。
现在，我们将看到如何获取数据并在浏览器中显示。
HTTP GET
在这里，我们使用在线 API 从中获取数据，而不是创建我们自己的 API。我们正在使用https://reqres.in/来测试我们的应用程序。
创建一个名为 DisplayList.js 的组件。
import React, { Component } from 'react'
export class DisplayList extends Component {
render() {
return (
<div>
List of Users
</div>
)
}
}
export default DisplayListimport React from 'react';
import logo from './logo.svg';
import './App.css';
import DisplayList from './components/DisplayList'
function App() {
return (
<div className="App">
<DisplayList></DisplayList>
</div>
);
}
export default App; 它将显示如下输出。
import axios from 'axios' this.state = {
Users:[]
} 现在，我们将调用 API 并将数据存储在我们的数组中的 componentDidMount() 生命周期方法中。这是在组件第一次挂载时执行的，并且只被调用一次。
因此，该组件将如下所示。
import React, { Component } from 'react'
import axios from 'axios'
const error ={
color: 'red',
fontWeight:'bold',
fontSize:'14'
}
export class DisplayList extends Component {
constructor(props) {
super(props)
this.state = {
users:[],
errorMessage:""
}
}
componentDidMount(){
axios.get('https://reqres.in/api/users/')
.then(response => {
console.log(response.data.data)
this.setState({
users:response.data.data
})
})
.catch(error =>{
this.setState({
errorMessage:"Error fetching data"
})
})
}
render() {
const {users,errorMessage} = this.state
console.log(users.length)
return (
<div>
List of Users
{
users.length?
users.map(user=> <div key={user.id}><img src={user.avatar} alt={user.first_name}/>{user.first_name + " "+ user.last_name}</div>):
null
}
{errorMessage ? <div style={error}>{errorMessage}</div> : null}
</div>
)
}
}
export default DisplayList 输出如下。
在上面， componentDidMount() 将在组件安装后调用，因此它将显示来自提供的 API 的用户列表。如果 API 不正确或没有返回输出，则会显示错误消息。
接下来，我们将学习 HTTP Post。
HTTP POST
与 HTTP Get 一样，我们使用 Axios Post 方法将数据发送到我们使用的 API。
让我们看一个演示。
import React, { Component } from 'react'
import axios from 'axios'
class UserForm extends Component {
constructor(props) {
super(props)
this.state = {
first_name: "",
last_name: "",
email: ""
}
}
onChangeHandler = (e) => {
this.setState({ [e.target.name]: e.target.value })
}
onSubmitHandler = (e) => {
e.preventDefault();
console.log(this.state)
axios.post('https://reqres.in/api/users/',this.state)
.then(response=>{
console.log(response)
})
.catch(error => {
console.log(error)
})
}
render() {
const { first_name, last_name, email } = this.state
return (
<div>
<form onSubmit={this.onSubmitHandler}>
<div>
Email : <input type="text" name="email" value={email} onChange={this.onChangeHandler} />
</div>
<div>
First Name : <input type="text" name="first_name" value={first_name} onChange={this.onChangeHandler} />
</div>
<div>
Last Name : <input type="text" name="last_name" value={last_name} onChange={this.onChangeHandler} />
</div>
<button type="submit">Submit</button>
</form>
</div>
)
}
}
export default UserForm 让我们在 App.js 中包含 UserForm 组件。
import React from 'react';
import './App.css';
import UserForm from './components/UserForm'
function App() {
return (
<div className="App">
<UserForm></UserForm>
</div>
);
}
export default App; 输出将显示如下。
我们也可以以同样的方式使用 PUT、DELETE 函数。
常见问题
如何在 React 中进行 AJAX 调用？
有许多 AJAX 库可以与 React 一起使用。一些流行的库是 Axios、jQuery Ajax 和浏览器内置的 Window.fetch。
在组件生命周期中应该在哪里进行 AJAX 调用？
调用应在 componentDidMount() 方法中进行，因为此方法允许 setState() 在检索数据后更新您的组件。
概括
在本文中，我们了解了 React 和 Web 服务器如何相互连接以传递数据以及 HTTP Get 和 HTTP Post 的工作原理。
您可以下载附带的源代码。通过这篇文章，我已经完成了 React 的基础知识。现在，我将继续介绍高级 React，它将包含 React Hooks 以及钩子如何在 React 中工作。如果您有任何困惑或建议，请发表评论。
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
