介绍：API 与 JavaScript 的基础

本文目标：从外部 API 获取数据

但在今天的项目中，我将展示如何通过外部 API 获取数据。我们将通过 WhereTheISS.at 提供的 API 来获取 国际空间站的实时位置。

什么是 API？

API（应用程序接口）是两个程序或应用程序之间的桥梁。它允许不同的程序互相发送数据。

例如，如果我是一个应用程序的设计师，想让其他开发者可以访问我的应用数据，我会创建一个接口，让其他应用程序通过这个接口来获取或操作我的数据。

实例：国际空间站 API

我将使用 WhereTheISS.at 提供的 API，它返回当前 国际空间站的经纬度，并包含其它信息如高度、速度等。我们将仅仅展示经纬度，并使用 Leaflet.js 库将其显示在地图上。

JSON 数据格式介绍

在进行这项工作之前，我们需要了解 JSON（JavaScript Object Notation），它是一种用于存储和交换数据的格式，易于人类阅读和编写，也便于机器解析。

JavaScript 对象与 JSON

我们先来看一个简单的 JavaScript 对象，它的格式和 JSON 很相似。通过这个对象，我们可以更容易理解如何从 API 中提取数据。

例如：

let position = {
  latitude: -45,
  longitude: 112
};

编写代码提取数据

现在，让我们编写代码，通过 fetch() 函数从 WhereTheISS.at API 获取数据。数据返回后，我们将其转换为 JSON 格式，提取 latitude 和 longitude，并显示在网页上。

let position = {
  latitude: -45,
  longitude: 112
};

console.log(position);

从 API 获取数据

我们将通过以下 API 端点来获取 国际空间站的实时位置：

https://api.wheretheiss.at/v1/satellites/25544

理解 API 文档与端点

首先，了解 API 文档是非常重要的。文档中会描述如何访问不同的端点，获得相应的数据。这里我们看到，API 没有要求身份验证，适合新手使用。

解析 JSON 数据

通过这个 API，我们获取的数据是 JSON 格式的。为了解析 JSON 数据，我们需要将其转换成 JavaScript 对象，才能从中提取信息。

获取和显示数据

当数据被成功获取并转换成 JSON 后，我们可以提取 latitude 和 longitude 并在网页中展示它们。

document.getElementById('lat').textContent = latitude;
document.getElementById('lon').textContent = longitude;

地图展示：下一步计划

在接下来的步骤中，我将使用 Leaflet.js 库将这些经纬度数据标注在地图上，从而直观地展示国际空间站的实时位置。

格式化 JSON 数据

当我们请求 API 返回的 JSON 数据时，可能会看到无格式的原始数据。为了更好地阅读和理解，可以使用浏览器插件来格式化这些数据。

编写异步函数获取数据

我将编写一个异步函数来获取数据，并通过 async/await 语法确保我们的数据获取顺利进行。

使用 JavaScript 解构赋值

通过 JavaScript 解构赋值，我们可以将返回的数据中的 latitude 和 longitude 提取到单独的变量中，方便后续处理。

const { latitude, longitude } = data;

在网页中显示经纬度

我们将在网页上创建 HTML 元素来显示 latitude 和 longitude。每次页面刷新时，都会从 API 获取最新数据。

< h1>Where is the ISS? < /h1 >
< p > Latitude: < span id="lat" > < /span > < /p >
< p > Longitude: < span id="lon" > < /span > < /p >

接下来：地图和定时更新

接下来，我将实现将这些数据绘制在地图上，并使用定时器每隔一定时间更新这些数据。你也可以尝试为这个项目增加更多功能，如显示速度或添加其它 API。

总结与展望

到目前为止，我们已经成功地从外部 API 获取数据，并将其显示在网页上。接下来，我们将进一步拓展这个项目，展示如何在地图上实时显示国际空间站的位置。

原文引自YouTube视频：https://www.youtube.com/watch?v=uxf0–uiX0I