本文转载自：众成翻译
译者：iOSDevLog
链接：https://www.zcfy.cc/article/3816
原文：https://www.fullstackreact.com/30-days-of-react/day-14/
这篇文章是30 Days of React系列的一部分。
在本系列中，我们将从最基本的开始，逐步了解开始React所需的所有知识。如果你曾经想学习反应，这是开始的地方！
30 Days of React PDF版本下载：下载超过300页的 PDF
我们已准备好外部请求获取数据！今天我们来看一下调用外部API的第一步。
直到这一点,我们的应用基本上是静态的。即使我们从 github 显示的数据也是我们项目中包含的静态数据。我们的应用确实和我们使用的数据一样有趣, 因此让我们的应用更有趣。
Querying for remote data(查询远程数据)
正常的浏览器工作流实际上是同步的。当浏览器接收 html 时, 它将解析 html 内容的字符串并将其转换为树对象 (这就是我们通常所指的 DOM 对象/DOM 树)。
当浏览器解析 DOM 树时, 当它遇到远程文件 (如<link />和<script />标签) 时, 浏览器将请求这些文件 (并行), 但将同步执行它们 (以便维护它们在源中列出的顺序)。
如果我们想从异地获取一些数据怎么办？我们将在启动时对数据进行请求, 以在应用中填充数据。但是, 由于外部 api 请求的异步特性, 它不一定那容易做到。
本质上, 这意味着我们必须在一段未知的时间内处理 javascript 代码, 以及实际发出 http 请求。幸运的是, 其他人已经处理这个问题很长一段时间, 我们现在有一些很好的方法来处理它。
从处理如何进行 http 请求开始, 我们将使用一个库 (称为 fetch, 它也是一个 web 标准) 使 http 请求更容易处理。
Fetch(获取)
为了使用获取, 我们需要在我们以前创建的应用中安装该库。让我们再次打开一个终端窗口, 使用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, 以及它们如何处理在介绍中讨论的异步。
我们明天会有 promises 。现在我们已经好好度过第二周了，明天见！
本教程系列的完整源代码可以在 GitHub repo, 上找到，其中包含所有样式和代码示例。
如果在任何时候你感到困扰，有进一步的问题，请随时通过以下方式与我们联系：
在原文文章末尾评论这篇文章
发送电子邮件至 [email protected]
加入我们的 gitter room
发推文给我们 @fullstackreact
REACT.JS DOM 应用 移动 JAVASCRIPT
版权声明 本译文仅用于学习、研究和交流目的，欢迎非商业转载。转载请注明出处、译者和众成翻译的完整链接。
原文链接：全栈React: React 30天
如果有疑问可以直接留言评论，如果觉得对你有帮助，可以小小的赞赏一杯奶茶钱，谢谢！！
扫一扫
8830
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
