26 AJAX与异步编程之使用Fetch API

在上一篇教程中，我们了解了AJAX的基本概念及其在网页中的作用。这一篇将深入探讨如何使用现代JavaScript提供的Fetch API来进行异步编程和数据获取。

什么是Fetch API？

Fetch API是一个现代的JavaScript API，用于进行网络请求和获取资源。它提供了一个简单而强大的接口，能够替代传统的XMLHttpRequest。使用Fetch API可以更方便地处理异步操作，尤其是在进行网络请求时。

基本用法

使用Fetch API非常简单。我们只需要调用fetch()函数，并传入资源的URL。fetch()返回一个Promise，这个Promise会在请求完成时resolve，允许我们使用.then()和.catch()来处理响应或错误。

以下是一个基本的示例，向一个API发送GET请求：

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // 解析JSON响应
  })
  .then(data => {
    console.log(data); // 处理获取的数据
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

在上面的代码中，我们首先调用fetch()并传入URL。然后，我们使用.then()链来处理响应。注意，我们需要检查响应是否“ok”，以确保请求成功。如果响应成功，我们解析JSON数据并进一步处理。

使用POST请求

除了GET请求，Fetch API也支持POST请求。以下是使用POST向一个模拟API发送数据的示例：

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST', // 指定请求方法
  headers: {
    'Content-Type': 'application/json', // 指定请求头
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }), // 将JavaScript对象转换为JSON字符串
})
  .then(response => response.json()) // 解析JSON响应
  .then(data => {
    console.log('Success:', data); // 处理成功响应的数据
  })
  .catch(error => {
    console.error('Error:', error); // 处理请求错误
  });

在这个例子中，我们通过fetch()发送一个POST请求，上传了一些JSON格式的数据。我们在请求头中指定了Content-Type，告诉服务器我们发送的数据格式。

处理请求错误

使用Fetch API时，我们需要特别注意处理请求错误。例如，网络故障、请求超时等。fetch()不会自动reject非2xx状态码的请求，因此我们要手动检查响应状态。

fetch('https://jsonplaceholder.typicode.com/posts/999') // 这个ID是无效的
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Fetch error:', error.message);
  });

这段代码的关键在于检查response.ok，如果它不为true，我们就抛出一个错误。

使用 async/await

Fetch API还与async/await语法高度兼容，这使得异步代码看起来更像同步代码，易于理解和维护。以下是一个使用async/await的示例：

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data); // 处理获取的数据
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

fetchData(); // 调用异步函数

在这个例子中，我们使用async关键字定义一个异步函数，并使用await暂停函数的执行，直到获取到响应。

小结

在这一篇中，我们学习了如何使用Fetch API进行网络请求，包括GET和POST操作，如何处理响应和错误，以及如何与async/await结合使用。Fetch API简化了AJAX请求的流程，使得代码更加清晰和易于维护。

接下来的一篇教程将会更深入地探讨如何处理异步操作，比如使用多个异步请求以及如何并行处理这些请求。希望大家能够继续关注！