在您的React应用程序中获取数据

> React是用于构建动态Web应用程序的领先库，主要集中在MVC体系结构中的视图层上。 本教程探讨了Web开发的基本方面：在React应用程序中获取和显示数据。 我们将研究各种数据提取策略，它们的优势和缺点以及将它们整合到您的项目中的最佳实践。 到最后，您将了解如何在React应用程序中有效管理数据检索。

入门

让我们首先使用

>创建一个基本的React应用：create-react-app>

create-react-app react-data-fetcher

此命令生成全面的项目结构。 有关

>的详细信息。 README一个简单的服务器create-react-app

出于演示目的，简单的服务器（使用

> framework的Python 3应用程序和用于数据持久性的REDIS）为获取报价提供了远程API。 API的简单性使我们能够专注于React数据获取过程。

组件hug

功能组件呈现一个标语列表，接受一系列字符串作为输入：QuoteList

此组件是MainQuoteList组件的孩子，其中采用条件渲染基于数据获取状态。

import React from 'react';

const QuoteList = ({ quotes }) => (
  quotes.map(quote => 

{quote}

) ); export default QuoteList;>用Axios

获取数据 App

使用Axios演示了异步数据检索：

fetchQuotes函数使用Axios展示一个简单的帖子请求：>

fetchQuotes = () => {
    this.setState({ ...this.state, isFetching: true });
    axios.get(QUOTE_SERVICE_URL)
      .then(response => this.setState({ quotes: response.data, isFetching: false }))
      .catch(e => console.log(e));
};

axios vs.fetch：比较

handleSubmit本节突出显示了Axios和Antial

API之间的关键差异。 Axios简化了JSON数据转换，并提供了内置功能，例如请求超时处理和HTTP Interceptors，

handleSubmit = event => {
    axios.post(this.props.quote_service_url, { 'quote': this.state.quote })
      .then(r => console.log(r))
      .catch(e => console.log(e));
    event.preventDefault();
};

>缺乏。 Axios的拦截器提供了一种集中的机制，用于修改请求和响应，从而增强代码可维护性。 该示例演示了如何使用Axios拦截器。 本教程还用

和

>。

结论fetch fetch该教程涵盖了React中的异步数据，包括生命周期方法，轮询，进度报告和错误处理。 Axios和API的比较突出了它们各自的优势和劣势。 提供的信息使您有效地管理React应用程序中的数据检索。 axios.allPromise.all>该帖子已通过Divya Dev。

以上是在您的React应用程序中获取数据的详细内容。更多信息请关注PHP中文网其他相关文章！