Fetch 解析 JSON

在使用 Fetch API 发送请求并接收响应时，经常需要处理 JSON 数据。本章将详细介绍如何使用 Fetch API 获取 JSON 数据，并将其解析为 JavaScript 对象。

发送请求并接收 JSON 数据

首先，我们需要发送一个请求来获取 JSON 数据。这可以通过 fetch() 函数实现。fetch() 接受两个参数：第一个是请求的 URL，第二个是可选的配置对象。以下是一个基本的例子：

fetch('https://api.example.com/data')
  .then(response => {
    // 处理响应
  });

在这个例子中，我们向 https://api.example.com/data 发送了一个 GET 请求。当请求成功后，服务器会返回一个响应对象，我们可以在这个对象上进行一系列操作。

检查响应状态

在实际应用中，我们通常需要检查响应的状态码，确保请求成功。HTTP 状态码 200 表示请求成功，其他状态码可能表示请求失败。我们可以通过 .ok 属性来检查响应是否成功：

// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络错误');
    }
    return response;
  })
  .then(response => {
    // 继续处理响应
  });

解析 JSON 数据

获取到响应后，我们需要将数据解析为 JSON 格式。fetch() 返回的响应对象有一个 .json() 方法，该方法返回一个 Promise，解析后的结果是一个 JavaScript 对象：

// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络错误');
    }
    return response.json(); // 将响应体解析为 JSON
  })
  .then(data => {
    console.log(data);
    // 在这里可以访问解析后的 JSON 数据
  })
  .catch(error => {
    console.error('处理错误:', error);
  });

在这个例子中，我们调用了 response.json() 方法来解析响应体中的 JSON 数据。解析后的数据是一个 JavaScript 对象，可以直接使用。

错误处理

在实际应用中，网络请求可能会失败。因此，我们需要添加错误处理逻辑。通过 .catch() 方法，可以在请求过程中捕获并处理错误：

// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络错误');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('处理错误:', error);
  });

处理复杂的 JSON 数据结构

在实际项目中，JSON 数据结构可能会非常复杂。例如，API 可能返回一个嵌套的对象或数组。在这种情况下，我们需要根据实际数据结构进行相应的处理：

// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络错误');
    }
    return response.json();
  })
  .then(data => {
    console.log(data); // 输出整个 JSON 数据
    const nestedData = data.nestedObject.arrayField; // 访问嵌套字段
    console.log(nestedData);
  })
  .catch(error => {
    console.error('处理错误:', error);
  });

在这个例子中，我们假设 JSON 数据包含一个名为 nestedObject 的对象，该对象有一个名为 arrayField 的数组字段。我们可以通过点符号访问这些嵌套字段。

使用 async/await 进行异步操作

为了使代码更易读和维护，我们可以使用 async 和 await 关键字来简化异步操作：

// javascriptcn.com 代码示例
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('网络错误');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('处理错误:', error);
  }
}

fetchData();

在这个例子中，我们定义了一个名为 fetchData 的异步函数。使用 await 关键字可以让代码看起来像同步代码一样简洁。同时，我们仍然保留了错误处理机制。

总结

通过本章的学习，我们了解了如何使用 Fetch API 获取 JSON 数据，并将其解析为 JavaScript 对象。我们还学习了如何检查响应状态、处理错误以及访问复杂的 JSON 数据结构。掌握了这些技能后，你就可以在实际项目中更高效地处理 JSON 数据了。