React js教程(15):HTTP 和React

作者 : 慕源网 本文共3603个字,预计阅读时间需要10分钟 发布时间: 2021-10-27 共264人阅读

本文是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  
该应用程序现已创建。现在,转到您新创建的文件夹并安装 Axios 以在我们的应用程序中进一步使用它。
npm install axios  

命令执行成功后,我们会在 package.json 文件中看到依赖更新了。

React js教程(15):HTTP 和React

现在,我们将看到如何获取数据并在浏览器中显示。

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 DisplayList
并将此组件包含在 App.js 中。
import 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;  

它将显示如下输出。

React js教程(15):HTTP 和React

现在,我们将使用 Axios 从库中获取数据。为此,首先,我们需要导入 axios 库。
import axios from 'axios'  
现在,为了存储我们从 API 获得的数据,我们将在 state 中创建一个空数组。
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  

输出如下。

React js教程(15):HTTP 和React

在上面, componentDidMount() 将在组件安装后调用,因此它将显示来自提供的 API 的用户列表。如果 API 不正确或没有返回输出,则会显示错误消息。

React js教程(15):HTTP 和React

接下来,我们将学习 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;  

输出将显示如下。

React js教程(15):HTTP 和React

我们也可以以同样的方式使用 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 中工作。如果您有任何困惑或建议,请发表评论。


慕源网 » React js教程(15):HTTP 和React

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录