WEB前端教程：使用 fetch 服务器获取数据

学会使用 Fetch 从服务器获取数据。根据获得的数据构建 HTML 页面

课程目标

理解什么是 API
学会使用 Fetch 从服务器获取数据。根据获得的数据构建 HTML 页面

什么是 API

“应用程序编程接口”(API) (opens new window)用作中间件，可以提供数据以供外部软件产品（在网站或应用程序中）使用

让我们从基础 fetch 使用开始：

fetch(URL);

这就是您获取 URL 的方法. 您需要将替换为 URL 实际的 URL 字符串。这里的 URL 就是您获取数据的应用程序编程接口（API）

比如您现在想随机获取美食食谱数据,使用如下 API：

https://www.themealdb.com/api/json/v1/1/random.php(opens new window)

在新选项卡中打开此 URL ,您会得到一系列 JSON 数据，数据里面就包含了该随机食谱是菜名以及烹饪步骤等等数据，这就是我们与外部服务通信的方式。

从 API 请求数据的方式有多种，但它们基本上都做同样的事情。大多数情况下，API 是通过 URL 访问的，如何查询这些 URL 的细节会根据您使用的特定服务而变化。例如，ExchangeRate API 有多种类型的数据可供您请求。要获取美元的汇率，您可以将美元的名称简写(USD)作为 URL 查询字符串参数传递，如下所示：

https://v6.exchangerate-api.com/v6/YOUR-API-KEY/latest/USD

使用任何 API 的规则通常记录在提供服务网站上。在此处查看 ExchangeRate API 文档 (opens new window),如果您想查询别的货币，比如欧元，只需要将 USD 替换为 EUR 即可

请将上面的汇率 URL 粘贴到您的浏览器中,你可能会得到如下错误信息：

{
"result": "error",
"documentation": "https://www.exchangerate-api.com/docs",
"terms-of-use": "https://www.exchangerate-api.com/terms",
"error-type": "inactive-account",
"extra-info": "Please contact support."
}

由上我们来讨论关于 API 的另一点 API 密钥。在大多数情况下，您必须先创建一个帐户并从 API 服务请求一个“API 密钥”，然后再尝试从其端点获取数据。一旦获得，API 密钥通常必须包含在每个数据请求中。比如修改如上的 URL 请求字符串，替换 URL 字符串中YOUR-API-KEY字段为您的 API 密钥，您就可以正常获取数据了。

例如另一个 URL 查询字符串参数：

https ://v6.exchangerate-api.com/v6/33636e6a9f794385e0d21356/latest/USD

您可以想象，API 密钥对您来说是随机且唯一的。因此，像的细节会根据您使用的特定服务而变化。例如，ExchangeRate 这样的服务可以将您的 API 密钥与您对其数据的请求相关联，包括您请求它的次数和频率。

一方面，发布 API 密钥允许 API 服务更好地跟踪对其系统和数据的滥用。另一方面，它也可以成为这些服务减轻和恢复运营成本的一种方式。例如，ExchangeRate 不仅提供免费层，还提供各种付费层。毕竟，运行服务器是要花钱的，API 也不例外。

阅读下面材料具体了解什么是 API

任务

请您现在提出第一个 API 请求。

在 exchangerate-api.com (opens new window)上注册一个免费帐户,获取您的 API 密钥
复制示例请求 URL。此示例请求包括您的 API 密钥。随意在新选项卡中打开 URL 以检查输出。由此您的获取了美元的汇率数据信息
查看ExchangeRate API 文档 (opens new window)，再创建一个获取人民币（CNY）汇率的 API

使用 Fetch 获取数据

那么我们如何真正将数据从 API 获取到我们的代码中呢？

自 IE5 于 1998 年发布以来,在代码中访问 API 数据的主要方式是使用 XMLHttpRequest (opens new window). 此功能在所有浏览器中仍然有效，但不幸的是，它不是特别好用。语法看起来像这样：

// Just getting XHR is a mess!
if (window.XMLHttpRequest) {
  // Mozilla, Safari, ...
  request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  // IE
  try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
  }
}

// Open, send.
request.open("GET", "https://url.com/some/url", true);
request.send(null);

几年后，Gmail 和其他丰富的应用程序大量使用了它，并使这种方法如此流行，以至于它不得不有一个名字：AJAX (opens new window)。

编写以上的代码，不得不说十分痛苦，于是开发人员开始编写第三方方库来解决这个问题并使其更易于使用。一些比较流行的库是 axios (opens new window)和 jquery (opens new window)。

如今，Fetch API 已被标准化为异步网络请求的现代方法，并使用 Promises 作为构建块,语法如下：

fetch("URL")
  .then(function(response) {
    // 成功响应
  })
  .catch(function(err) {
    // 错误处理
  });

阅读下面材料，学习 fetch 使用方法

跨域资源共享

Fetch（和 XMLHttpRequest）遵循同源策略 (opens new window)。这意味着浏览器会限制来自脚本的跨域 HTTP 请求

任务

请你利用 fetch 实现货币汇率转换项目,选择国家以获得特定金额的汇率计算。

需求描述

页面显示带有 2 个货币选择列表（左边选择的货币是基础货币，右边选择的货币是目标货币）和 1 个金额输入框
获取汇率的 API 接口：https://www.exchangerate-api.com/(opens new window)
您需要创建一个免费帐户并浏览API 说明文档 (opens new window)(在上一个任务中已经实现了这一步的同学可以跳过）
点击获取汇率按钮,计算基础货币金额转换为目标货币的金额，并且显示页面中

参考效果如下：

编码

按照示例图 (opens new window)完成一个美食菜谱搜索系统

随机搜索美食的数据可以调用themealdb.com (opens new window)提供的公共接口来获得。
参考功能说明图 (opens new window),展示页面和搜索框
使用 Fetch 来调用数据接口获得美食数据
选中美食后，展示美食的食谱
刷新页面或者进入页面，用 Fetch 调用接口展示一些随机的美食在网站
示例图只做参考，重点是功能部分的完成，来得到练习 JS 的目的，你可以按照自己的喜好来结构和美化页面。
如果你不想调用公共 API，您还可以自己创建一个 JSON 文件，编写一些 JSON 数据，然后在本地起一个服务器来获得 JSON 数据，来渲染页面

进阶任务

除了以上我们举例的获取汇率接口，现实中还有各式各样的 API。如下我们列出了一下免费开放 API 列表，感兴趣的同学尽情发挥您的想象力，实现更多有意思的项目

提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

总结

依然把今天的学习用时，收获，问题进行记录。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-11-02 11:03
阅读 ( 876 )
分类：WEB前端开发