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