【全栈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 。从第二周开始好的工做,, 明天见!