【全棧React】第14天: 獲取遠(yuǎn)程數(shù)據(jù)

qujian 發(fā)布于2019-08-20 18:33 / 2283人閱讀

摘要：本文轉(zhuǎn)載自眾成翻譯譯者鏈接原文我們已準(zhǔn)備好外部請(qǐng)求獲取數(shù)據(jù)今天我們來(lái)看一下調(diào)用外部的第一步。查詢(xún)遠(yuǎn)程數(shù)據(jù)正常的瀏覽器工作流實(shí)際上是同步的。如果我們想從異地獲取一些數(shù)據(jù)怎么辦我們將在啟動(dòng)時(shí)對(duì)數(shù)據(jù)進(jìn)行請(qǐng)求以在應(yīng)用中填充數(shù)據(jù)。

本文轉(zhuǎn)載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3816
原文：https://www.fullstackreact.com/30-days-of-react/day-14/

我們已準(zhǔn)備好外部請(qǐng)求獲取數(shù)據(jù)！今天我們來(lái)看一下調(diào)用外部API的第一步。

直到這一點(diǎn),我們的應(yīng)用基本上是靜態(tài)的。即使我們從 github 顯示的數(shù)據(jù)也是我們項(xiàng)目中包含的靜態(tài)數(shù)據(jù)。我們的應(yīng)用確實(shí)和我們使用的數(shù)據(jù)一樣有趣, 因此讓我們的應(yīng)用更有趣。

查詢(xún)遠(yuǎn)程數(shù)據(jù)

正常的瀏覽器工作流實(shí)際上是同步的。當(dāng)瀏覽器接收 html 時(shí), 它將解析 html 內(nèi)容的字符串并將其轉(zhuǎn)換為樹(shù)對(duì)象 (這就是我們通常所指的 DOM 對(duì)象/DOM 樹(shù))。

當(dāng)瀏覽器解析 DOM 樹(shù)時(shí), 當(dāng)它遇到遠(yuǎn)程文件 (如and標(biāo)記) 時(shí), 瀏覽器將請(qǐng)求這些文件 (并行), 但將同步執(zhí)行它們 (以便維護(hù)它們?cè)谠粗辛谐龅捻樞?。

如果我們想從異地獲取一些數(shù)據(jù)怎么辦？我們將在啟動(dòng)時(shí)對(duì)數(shù)據(jù)進(jìn)行請(qǐng)求, 以在應(yīng)用中填充數(shù)據(jù)。但是, 由于外部 api 請(qǐng)求的異步特性, _它_不一定那容易做到。

本質(zhì)上, 這意味著我們必須在一段未知的時(shí)間內(nèi)處理 javascript 代碼, 以及實(shí)際發(fā)出 http 請(qǐng)求。幸運(yùn)的是, 其他人已經(jīng)處理這個(gè)問(wèn)題很長(zhǎng)一段時(shí)間, 我們現(xiàn)在有一些很好的方法來(lái)處理它。

從處理如何進(jìn)行 http 請(qǐng)求開(kāi)始, 我們將使用一個(gè)庫(kù) (稱(chēng)為 fetch,, 它也是一個(gè) web 標(biāo)準(zhǔn)) 使 http 請(qǐng)求更容易處理。

獲取

為了使用獲取, 我們需要在我們以前創(chuàng)建的應(yīng)用中安裝該庫(kù)。讓我們?cè)俅未蜷_(kāi)一個(gè)終端窗口, 使用npm 來(lái)安裝 whatwg-fetch 庫(kù) (fetch的實(shí)現(xiàn))。在創(chuàng)建應(yīng)用的同一目錄中, 讓我們調(diào)用:

`npm install --save whatwg-fetch`

安裝了該庫(kù)后, 我們可以向離線服務(wù)器發(fā)出請(qǐng)求。為了獲得訪問(wèn) fetch 庫(kù), 我們需要在腳本中import 該包。讓我們更新我們的src/App.js 文件的前幾行添加第二行:

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

whatwg-fetch 對(duì)象是唯一的, 因?yàn)樗巧贁?shù)幾個(gè)庫(kù), 我們將使用它在global對(duì)象上附加它的導(dǎo)出 (在瀏覽器的情況下, 這個(gè)對(duì)象是window)。
不同于react 庫(kù), 我們不需要得到一個(gè)處理它的輸出, 因?yàn)閹?kù)使它在全局對(duì)象上可用。

在我們的項(xiàng)目中包含whatwg-fetch 庫(kù), 我們可以使用 fetch() api 進(jìn)行請(qǐng)求。然而, 在我們真正開(kāi)始使用 fetch() api 之前, 我們需要了解什么是承諾, 以及它們?nèi)绾翁幚碓诮榻B中討論的異步。

我們明天會(huì)有 promises 。從第二周開(kāi)始好的工作,, 明天見(jiàn)!