可以說 React 是構建 web 應用最流行的庫。然而，它並不是全能的 web 框架。它只關注 MVC 中的 view 模組。

React 整個生態系統可以解決其它問題。這篇教程中，你將會學到如何在 React web 應用中獲取資料並顯示。這很重要。 在整個 React 元件中有幾個地方都可以獲取遠端資料。何時獲取資料是另外一個問題。你還需要考慮用何種技術獲取資料、資料儲存在哪裡。

在教程結束後，你會清楚的知道 React 中該如何獲取資料，不同方法的利弊和如何在 React 應用中使用這些技術。

開始

讓我們用 create-react-app 建立一個 React 應用的框架：

> create-react-app react-data-fetcher

我們會得到一個精緻的結構目錄。如果，你不熟悉 create-react-app，可以先看看 README 檔案。

建立簡單的服務

我建立了一個簡單的 quotes 服務。這篇教程的重點不是它，它可以提供遠端 API 用來演示如何在 React 中獲取資料。 為了滿足你們的好奇心，它是一個基於 hug 框架 （http://www.hug.rest/）Python 3 的應用，用 Redis 做持久化儲存。

API 非常簡單。/quotes 是一個簡單介面。通過一個 GET 請求返回所有的 quotes，並且你可以通過 POST 請求新增一條記錄。

完整的程式碼可以在 GitHub (https://github.com/the-gigi/quote-service)檢視。

App 預覽

這個 React 應用 Demo 可以和 quote 服務通訊、顯示所有的 quote 並可以新增新的記錄。

這是截圖：

App 的結構非常簡單。我用 create-react-app 建立了一個基礎框架並在 src 目錄中新增兩個元件：QuoteList 和 AddQuoteForm。以下是詳細的目錄結構（不包含 node_moudules）:

顯示 Quotes

QuoteList 函式元件以無序列表的形式展示所有的 quotes。它需要傳入一組資料字串：

import React from 'react'const QuoteList = ({quotes}) =>
    quotes.map
 
(quote => <li key={quote}>{quote}</li>)
export default QuoteList

通過 Fetch 獲取遠端資料

Fetch 是基於 promise 的 API，它會返回一個物件。為了得到實際的 JSON 資料，你需要對響應物件執行 json() 方法。

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

何時何地執行獲取資料的程式碼

當然 React 都是元件。重點是何時何地才去載入獲取遠端資料呢！ 如果你能很好的組織程式碼，你應該會有很多的通用元件和一些特定的元件。React 和 JavaScript 通常非常靈活，你可以在任何地方注入業務邏輯。

因為我希望資料一直是最新的，所以，會以輪詢的方式通過 REST API 獲取遠端資料。 但是，初始化資料也非常重要。React 元件的生命週期方法允許你在特定的時間執行你需要的業務邏輯。 componentDidMount()方法會在元件可訪問的時候執行，此時就可以改變元件的 state。這時候獲取遠端資料是非常合適的。

看起來就像這樣：

componentDidMount() {
this.fetchQuotes()
}

如果，你想縮短頁面的第一次可見的時間，你可以考慮在 componentWillMount() 方法中初始化非同步資料，但是，這有可能會在元件未裝載前完成資料請求。我不推薦這麼操作。

資料更新頻率

在 componentDidMount() 方法中初始化資料是很合理的，但是，我需要經常更新資料。基於 REST API，只有通過輪詢的方式解決。Quote 伺服器非常簡單，而且始終都會返回所有的 quotes。

大多數可擴充套件服務都會提供方法檢查 HTTP 中的 if-modify-since 和 eTag 判斷資料是否有更新。我們的應用中只是在 componentDidMount() 方法中啟動一個 5s 的定時器更新資料，然後，在 componentWillUnmount() 方法清除定時器

componentDidMount() {
this.fetchQuotes()
this.timer = setInterval(() => this.fetchQuotes(), 5000);
}
componentWillUnmount() {
this.timer = null;
} 

輪詢的時間間隔由應用決定。如果，你需要實時更新，並後臺有效能要求，可以考慮用 WebSockets 代替 REST。

載入資料延遲的處理

有時候載入資料會花費很長時間。在這種下，顯示一個進度條或者一個醒目的動畫讓使用者知道程式正在處理，這對使用者體驗有很大的幫助。 當用戶在初始化資料的時候（比如：點選搜尋按鈕）這很重要。

在演示 app 中，當請求時資料時我簡單的顯示一條提示資訊：“請求資料中...”。在 App 元件的 render() 方法中，通過檢查state.isFetching 的值來決定是否顯示提示資訊。

render() {
const title = 'Quotes for ya!'let now = new Date()
return (
<div className='App'>
<h2 className='App-title'>{title}</h2>
<p>{this.state.isFetching ? 'Fetching quotes...' : ''}</p>
<QuoteList quotes={this.state.quotes} />
<AddQuoteForm quote_service_url={QUOTE_SERVICE_URL}/>
</div>
    );
}

fetchQuotes() 方法在初始化開始的時候會把 state.isFetching 的值更新為 true，當有響應返回的時候就切換回 false：

 fetchQuotes = () => {

this.setState({...this.state, isFetching: true})
fetch(QUOTE_SERVICE_URL)
        .then(response => response.json())
        .then(result => this.setState({quotes: result,
isFetching: false}))
        .catch(e => console.log(e));
}

錯誤的處理

在這裡我對錯誤的處理非常有限只是捕獲錯誤並輸出到控制檯。在你的應用中，你可以執行一些重試邏輯、提示使用者或者顯示一些預設的內容。

Fetch API vs. Axios

Fetch API 是有缺陷的。處理響應的時候必須額外的經過 JSON 處理。它也不會捕獲所有的錯誤。 例如，404 將會做為一個正常的響應返回。你必須主動檢查響應的狀態碼並處理捕獲的網路異常。

因此你必須在兩個地方處理錯誤。但是，你可以使用 axios.js 解決這些問題，在新增額外代價的情況下使用更簡潔的程式碼。使用 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 新增新的記錄程式碼也非常簡潔。以下是 fetch 的版本：

handleSubmitWithFetch = event => {
let data = new FormData()
data.append('quote', this.state.quote)
fetch(this.props.quote_service_url,
        {method: 'POST', body: data})
        .then(response => response.json())
        .catch(e => console.log(e));
    event.preventDefault();

}

這是 axios 的版本：

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();
}

在這篇教程中，你學到了如何在 React 元件中非同步載入資料。我們也提到了相關的生命週期方法、輪詢、進度條和錯誤的處理。

我們也瞭解到兩個基於 promise 的庫：fetch API 和 axios.js。現在，你可以構建自己的 React 應用了。

在最近幾年中，React 越來越流行。事實上，市場有很多可以供購買、審查、部署的專案。 如果，你查詢更多的 React 資源，不要遲疑請看這裡

專注分享當下最實用的前端技術。關注前端達人，與達人一起學習進步！

長按關注"前端達人"