【全棧React】第14天: 獲取遠程數據

本文轉載自：衆成翻譯
譯者：iOSDevLog
連接：http://www.zcfy.cc/article/3816
原文：https://www.fullstackreact.com/30-days-of-react/day-14/

咱們已準備好外部請求獲取數據！今天咱們來看一下調用外部API的第一步。

直到這一點,咱們的應用基本上是靜態的。即便咱們從 github 顯示的數據也是咱們項目中包含的靜態數據。咱們的應用確實和咱們使用的數據同樣有趣, 所以讓咱們的應用更有趣。

查詢遠程數據

正常的瀏覽器工做流其實是同步的。當瀏覽器接收 html 時, 它將解析 html 內容的字符串並將其轉換爲樹對象 (這就是咱們一般所指的 DOM 對象/DOM 樹)。

當瀏覽器解析 DOM 樹時, 當它遇到遠程文件 (如and標記) 時, 瀏覽器將請求這些文件 (並行), 但將同步執行它們 (以便維護它們在源中列出的順序)。

若是咱們想從異地獲取一些數據怎麼辦？咱們將在啓動時對數據進行請求, 以在應用中填充數據。可是, 因爲外部 api 請求的異步特性, _它_不必定那容易作到。

本質上, 這意味着咱們必須在一段未知的時間內處理 javascript 代碼, 以及實際發出 http 請求。幸運的是, 其餘人已經處理這個問題很長一段時間, 咱們如今有一些很好的方法來處理它。

從處理如何進行 http 請求開始, 咱們將使用一個庫 (稱爲 fetch,, 它也是一個 web 標準) 使 http 請求更容易處理。

獲取

爲了使用獲取, 咱們須要在咱們之前建立的應用中安裝該庫。讓咱們再次打開一個終端窗口, 使用npm 來安裝 whatwg-fetch 庫 (fetch的實現)。在建立應用的同一目錄中, 讓咱們調用:

`npm install --save whatwg-fetch`

安裝了該庫後, 咱們能夠向離線服務器發出請求。爲了得到訪問 fetch 庫, 咱們須要在腳本中import 該包。讓咱們更新咱們的src/App.js 文件的前幾行添加第二行:

import React, { Component } from 'react';
import 'whatwg-fetch';
// ...

whatwg-fetch 對象是惟一的, 由於它是少數幾個庫, 咱們將使用它在global對象上附加它的導出 (在瀏覽器的狀況下, 這個對象是window)。
不一樣於react 庫, 咱們不須要獲得一個處理它的輸出, 由於庫使它在全局對象上可用。

在咱們的項目中包含whatwg-fetch 庫, 咱們可使用 fetch() api 進行請求。然而, 在咱們真正開始使用 fetch() api 以前, 咱們須要瞭解什麼是承諾, 以及它們如何處理在介紹中討論的異步。

咱們明天會有 promises 。從第二週開始好的工做,, 明天見!