JS Fetch: 一站式网络请求利器

简介

在现代Web开发中，我们经常需要发送网络请求来获取数据。传统的做法是使用XMLHttpRequest（XHR）对象来进行AJAX请求。然而，随着技术的发展，新一代的Web API已经出现，其中最受欢迎的是Fetch API。

Fetch API是一种现代的网络请求API，它提供了一种更简单，更强大的方式来进行网络请求。它通过提供一个简单的接口和强大的功能，使得进行网络请求变得更加容易。

在本文中，我们将详细介绍Fetch API，并通过示例代码来演示如何使用它进行网络请求。

Fetch API基础知识

Fetch API是一个基于Promise的API，它提供了一种更简单的方式来发送网络请求。它的语法非常简洁，一个基本的Fetch请求看起来像这样：

fetch(url)
  .then(response => response.json())
  .then(data => {
    // 对返回的数据进行处理
  })
  .catch(error => {
    // 处理错误情况
  });

上面的代码中，我们通过调用fetch(url)来发送一个网络请求。它返回一个Promise对象，Promise对象在请求成功时会返回一个包含响应数据的response对象。

在上述代码中，我们通过使用.then()方法对返回的response对象进行处理。我们可以使用.json()方法将响应数据解析为JSON格式（如果返回的是JSON数据），并在第二个.then()中对解析后的数据进行处理。

最后，我们使用.catch()方法来捕获可能发生的错误，并对错误情况进行处理。

Fetch API还提供了其他强大的功能，如设置请求头、发送POST请求、处理文件上传等。下面我们将通过示例代码来演示这些功能。

示例代码

发送GET请求

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

上述代码中，我们发送了一个GET请求到https://api.example.com/data，并在成功响应后打印出返回的数据。

发送POST请求

fetch('https://api.example.com/post', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'John', password: '123456' })
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

上述代码中，我们发送了一个POST请求到https://api.example.com/post，并设置请求头和请求体。请求头中指定了Content-Type为application/json，请求体中包含了一个JSON格式的对象。

处理错误情况

fetch('https://api.example.com/data')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Network response was not ok.');
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });