在您的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中文網其他相關文章！