fetch api json_FETCH

热舞 • 2024-07-12 19:45 • 行业动态 • 阅读 8

Fetch API 是一种现代的、基于 Promise 的网络请求方法，用于在浏览器中进行异步 HTTP 请求。它提供了一种简单的方式来获取资源，并支持各种数据格式，包括 JSON。使用 Fetch API，你可以发送 GET、POST、PUT、DELETE 等请求，并处理响应数据。

Fetch API 是一种现代的、基于 Promise 的网络请求方法，用于在浏览器中进行异步 HTTP 请求，它提供了一种简单的方式来获取资源，如 JSON 数据，以下是一个简单的示例，展示了如何使用 Fetch API 发送一个 GET 请求并处理返回的 JSON 数据：

（图片来源网络，侵删）

// 定义要请求的 URL
const url = 'https://api.example.com/data';
// 使用 fetch() 函数发起 GET 请求
fetch(url)
  .then(response => {
    // 检查响应是否成功（HTTP 状态码为 200299）
    if (!response.ok) {
      throw new Error('网络请求失败');
    }
    // 解析响应体为 JSON
    return response.json();
  })
  .then(data => {
    // 处理解析后的 JSON 数据
    console.log(data);
  })
  .catch(error => {
    // 处理请求过程中的错误
    console.error('请求出错：', error);
  });

在这个示例中，我们首先定义了要请求的 URL，我们使用fetch() 函数发起一个 GET 请求。fetch() 函数返回一个 Promise，当请求完成时，这个 Promise 会解析为一个 Response 对象，我们可以使用then() 方法来处理这个 Response 对象。

在第一个then() 回调中，我们检查响应是否成功（HTTP 状态码为 200299），如果响应不成功，我们抛出一个错误，如果响应成功，我们使用response.json() 方法将响应体解析为 JSON 对象，这个方法也返回一个 Promise，所以我们需要再次使用then() 来处理解析后的 JSON 数据。

在第二个then() 回调中，我们处理解析后的 JSON 数据，在这个示例中，我们只是将数据打印到控制台，你可以根据需要对数据进行处理，例如更新 UI 或执行其他操作。

我们使用catch() 方法来捕获并处理请求过程中可能出现的任何错误，在这个示例中，我们只是将错误信息打印到控制台，你可以根据需要自定义错误处理逻辑。