Fetch API 获取 IP

在 Web 开发中，有时我们需要获取用户的 IP 地址以便进行一些地理位置等相关的操作。Fetch API 是一个现代 Web 开发中非常常用的网络请求库，它可以帮助我们方便地获取用户的 IP 地址。本文将通过 HTML 的方式介绍如何使用 Fetch API 获取用户的 IP 地址。

准备工作

在开始使用 Fetch API 获取用户的 IP 地址之前，需要准备一些基础工作。首先，需要安装一个支持 Fetch API 的浏览器（如 Chrome、Firefox 等），其次需要了解一些基本的 HTML、CSS 和 JavaScript 知识。

使用 Fetch API 获取 IP 地址

获取用户的 IP 地址可以使用一些免费的 IP 地址查询服务。在本文中，我们使用的是 IPify 这个免费的服务。具体的代码如下：

fetch('https://api.ipify.org?format=json')
  .then(response => response.json())
  .then(data => console.log(data.ip));

在这段代码中，我们使用了 Fetch API 中的 fetch() 方法来请求 https://api.ipify.org?format=json 这个 URL。该 URL 返回一个 JSON 格式的响应，其中包含用户的 IP 地址信息。接下来，我们使用 response.json() 方法将该响应转换成 JavaScript 对象的格式。最后，我们使用 data.ip 来访问该对象中的 IP 地址信息。

注意事项

需要注意的是，在使用 Fetch API 进行网络请求时，我们必须处理网络请求成功或失败两种情况。因此，在使用 fetch() 方法时，需要使用 .then() 方法来处理请求成功的情况，以及使用 .catch() 方法来处理请求失败的情况。代码示例如下：

fetch('https://api.ipify.org?format=json')
  .then(response => response.json())
  .then(data => console.log(data.ip))
  .catch(error => console.error(error));

总结

本文介绍了如何使用 Fetch API 在 HTML 中获取用户的 IP 地址。需要注意的是，在进行网络请求时，我们需要处理请求成功和失败两种情况。同时，也需要保证我们的 Fetch API 可以支持浏览器的基础功能，例如允许网络请求等。