本教程为30天React系列的一部分，从基础开始，逐步深入React的各项技能。讲解了如何使用fetch API从远程服务器获取数据，包括库的安装、使用及处理异步请求的基本概念。
这篇文章是30天React系列的一部分 。
在本系列中，我们将从非常基础开始，逐步了解您需要了解的所有内容，以便开始使用React。如果您曾经想学习React，那么这里就是您的最佳选择！
获取远程数据
我们准备提出外部请求来获取数据！今天我们正在研究调用外部API的第一步。
我们的应用程序在此之前基本上是静态的。即使我们从Github显示的数据也是我们项目中包含的静态数据。我们的应用程序真的和我们使用的数据一样有趣，所以让我们的应用程序更有趣。
查询远程数据
普通的浏览器工作流实际上是同步的。当浏览器收到html时，它会解析html内容的字符串并将其转换为树对象（这就是我们经常称之为DOM对象/ DOM树）。
当浏览器解析DOM树时，当遇到远程文件（例如<link />和<script />标签）时，浏览器将（并行）请求这些文件，但会同步执行它们（以便维护它们在源中列出的顺序） 。
如果我们想从场外获取一些数据怎么办？我们将在发布时请求数据，以便在我们的应用中填充数据。然而，它并不一定是容易因为外部API请求的异步特性做。
从本质上讲，这意味着我们必须在未知的时间段之后处理JavaScript代码以及实际发出HTTP请求。对我们来说幸运的是，其他人已经解决了这个问题很长一段时间，我们现在有一些非常好的方法来处理它。
从处理我们将如何发出HTTP请求开始，我们将使用一个库（称为fetch，也是一个Web标准，希望如此）来使http请求更容易处理。
Fetch(取)
为了使用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明天我们会接受。通过第二周的好工作明天见！
学习REACT正确的方法
React和朋友的最新，深入，完整的指南。
下一章：
承诺简介
本教程系列的完整源代码可以在GitHub repo上找到，其中包括所有样式和代码示例。
如果您在任何时候感到困难，还有其他问题，请随时通过以下方式与我们联系：
- 在文章末尾评论这篇文章
- 通过react@fullstackreact.com发送电子邮件给我们
- 加入我们的gitter室
- 发送电子邮件至@fullstackreact
扫一扫
752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
