从 Fetch JavaScript 返回值

在前端开发中，获取异步数据是常见的需求。Fetch API 是用于提供资源的界面，包括跨网络进行获取资源。Fetch 能够将资源请求可以捕获，然后返回 Response 对象。在本文中，我们将探讨如何在 JavaScript 中从 Fetch 返回值。

Fetch API

Fetch API 是一组用于在 Web 页面上异步获取资源的接口。Fetch API 允许你发起 HTTP 请求并返回一个 Promise，以便异步解析响应。它提供了更好的替代 XMLHttpRequest。

Fetch API 可以使用全局的 fetch 函数进行调用。fetch 函数可以接受两个参数，一个是表示资源 URL 的字符串，另一个是初始化选项。例如：

fetch('https://api.github.com/users/github')
  .then(response => response.json())
  .then(data => console.log(data));

在这个例子中，我们使用 fetch 函数获取 Github 用户的资源，并用 then 方法进行处理返回的响应数据。

处理 Fetch 返回值

Fetch 返回的结果是一个 Promise 对象。可以通过 then 方法对返回值进行处理。在 then 方法中，有一个 response 参数可以访问响应数据。例如：

fetch('https://api.github.com/users/github')
  .then(response => response.json())
  .then(data => console.log(data));

在这个例子中，我们可以使用 response.json() 方法来将响应体解析为 JSON。最后，我们打印得到的 JSON 对象。

错误处理

如果 fetch 失败了，会返回一个拒绝的 Promise 对象。可以通过 catch 方法对错误进行处理。例如：

fetch('https://api.github.com/users/github')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

在这个例子中，我们使用 catch 方法在失败的情况下输出错误。

结论

在 JavaScript 中从 Fetch 返回值可以通过 Promise 和 then 方法进行处理。我们可以将获取的响应数据进行解析和处理。如果出现错误，可以使用 catch 方法。

Fetch API 是现代 Web 开发中常见的一种用于获取异步数据的方式。我们需要掌握它的基本使用方法以便于开发中的应用。