Fetch response.json() 方法-JavaScript中文网-JavaScript教程资源分享门户

response.json() 是 Fetch API 的一个方法，用于将响应体解析为 JSON 对象。当你需要从服务器获取 JSON 数据时，这个方法非常有用。本章将详细介绍如何使用 response.json() 方法来处理 JSON 数据。

使用场景

在实际项目中，我们经常需要从后端获取 JSON 数据。例如，从 RESTful API 获取用户信息、商品列表等数据。通过 response.json() 方法，我们可以方便地将这些数据解析为 JavaScript 对象，从而在前端进行操作和展示。

基础用法

发起请求并获取 JSON 数据

首先，我们需要发起一个 GET 请求来获取 JSON 数据。下面是一个简单的例子：

// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
  .then(response => {
    // 检查响应是否成功
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json(); // 将响应体解析为 JSON
  })
  .then(jsonData => {
    // 处理 JSON 数据
    console.log(jsonData);
  })
  .catch(error => {
    // 处理错误
    console.error('Error:', error);
  });

在这个例子中，我们首先调用 fetch 函数来发起请求。当请求成功时，response.ok 会返回 true，表示 HTTP 状态码在 200-299 范围内。接下来，我们调用 response.json() 方法将响应体解析为 JSON 对象。最后，我们在 .then 回调函数中处理 JSON 数据，并在 .catch 回调函数中处理可能出现的错误。

错误处理

在实际开发中，我们需要对可能出现的错误进行处理。例如，网络请求可能会失败，或者服务器返回的数据格式不正确。为了确保代码的健壮性，我们应该添加适当的错误处理逻辑。

// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(jsonData => {
    console.log(jsonData);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

处理不同的 HTTP 状态码

除了检查 response.ok 属性外，我们还可以检查具体的 HTTP 状态码，以便更精确地处理不同类型的错误。例如，404 表示资源未找到，500 表示服务器内部错误等。

// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
  .then(response => {
    if (response.status === 404) {
      throw new Error('Resource not found');
    } else if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(jsonData => {
    console.log(jsonData);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

高级用法

使用 async/await 语法

在现代 JavaScript 中，我们可以使用 async 和 await 关键字来简化异步代码的编写。这使得代码更具可读性和可维护性。

// javascriptcn.com 代码示例
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const jsonData = await response.json();
    console.log(jsonData);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

并行请求

在某些情况下，我们需要同时发起多个请求，并等待所有请求完成。这时可以使用 Promise.all 方法。

// javascriptcn.com 代码示例
const url1 = 'https://api.example.com/data1';
const url2 = 'https://api.example.com/data2';

async function fetchData() {
  try {
    const [response1, response2] = await Promise.all([
      fetch(url1),
      fetch(url2)
    ]);

    const json1 = await response1.json();
    const json2 = await response2.json();

    console.log(json1, json2);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

处理 JSON 数据的复杂结构

有时候，从服务器返回的 JSON 数据可能具有复杂的结构，例如嵌套的对象或数组。在这种情况下，我们需要根据实际情况进行数据处理。

// javascriptcn.com 代码示例
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const jsonData = await response.json();

    // 处理复杂数据结构
    const processedData = jsonData.map(item => ({
      id: item.id,
      name: item.name,
      description: item.description
    }));

    console.log(processedData);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

总结

本章介绍了 response.json() 方法的基本用法和一些高级技巧，包括错误处理、使用 async/await 语法以及处理复杂的 JSON 数据结构。通过这些知识，你可以更好地理解和应用 Fetch API 来处理 JSON 数据。在实际开发中，灵活运用这些技巧可以帮助你编写出更加高效和健壮的代码。