从外部 API 获取数据
学习如何从外部 API 获取数据来驱动你的应用程序。
真实地使用 API
在本节课中，我们将通过一个天气应用示例来演示：用户输入一个城市，应用会获取并显示该城市的天气信息。为了简化，我们未添加其他功能，本课程将专注于如何从外部天气 API 获取数据，并将其展示在应用中。
什么是 API？
API（应用程序编程接口）是一种设计用于让两个程序相互交互并交换信息的接口。以天气 API 为例，API 服务提供商部署了基础设施，能够从全球各地获取实时天气信息，并在收到请求时将这些信息提供给其他应用程序。这种请求具有由 API 提供方定义的特定格式。当应用程序向 API 服务发起查询时，服务会返回请求的具体信息。
### 天气 API 本课程中我们使用 openweathermap.org 提供的天气信息服务。我们将向 API 发送请求，查询用户输入的特定城市，并展示 API 返回的响应结果。以下代码片段展示了我们在示例应用中使用的 API 查询格式。
1api.openweathermap.org/data/2.5/weather?q={city}&units=metric&appid={API_key}
API 密钥
为了管理对服务的访问权限，API 提供商通常会为每个账户分配一个唯一的秘密密钥，称为“API 密钥”。使用该 API 的功能必须提供此密钥。出于演示目的，我们已提前完成这一部分，将 API 密钥嵌入到应用中，因此你可以直接使用应用，无需任何设置、注册账户或生成自己的 API 密钥。
生成 API 密钥
如果你希望生成自己的 API 密钥，可以前往 openweathermap.org 注册一个免费账户。登录后，点击 API Keys 选项卡（或访问 home.openweathermap.org/api_keys）来生成密钥。新生成的 API 密钥将在 30 分钟后生效。免费账户在 OpenWeatherMap 上每分钟允许 60 次 API 调用。
请运行下方的应用程序，查询任意城市的天气信息。应用会以特定格式显示获取的信息，而原始的 JSON API 响应内容可以在应用下方的控制台中查看。
天气应用
No configuration found for ID: 2281dd452d294370a968948bdb8ec2e91e6cfd3a1c2af48fec7cfb73d3383aa6
在上述应用中，请注意变量 city 使用了 v-model 指令，以便在 API 请求中使用。API 请求由 getWeather() 函数发起。fetch() 异步函数用于与 API 通信，当响应到达后，会在 fetch() 的回调中进行处理。fetch() 函数会将 API 响应中的各项信息赋值给相应的 data 变量。
在 data 属性中，我们定义了用于存储从 API 响应中获取的天气信息的变量。同时，还包含一些用于错误处理和格式化显示的变量。
getWeather() 函数还会检查响应是否有效。在某些情况下会出现 404 错误，此时会显示错误提示。目前，它通过 API 响应来判断城市是否有效，若城市无效则显示错误信息。
注意：
v-if指令用于根据条件显示错误消息（或显示当前天气的城市名称标题）。这两个元素的显示取决于对应的布尔变量city_error和gotResponse，它们分别绑定到相应的v-if指令。