fetch使用详解

fetch 是现代Web开发中一个非常重要的API，它允许开发者在JavaScript中发起HTTP请求并处理响应。fetch API 提供了一个更简洁、更灵活、更强大的接口来处理网络请求，替代了传统的 XMLHttpRequest（XHR）。

fetch 的基本用法

fetch 函数接受至少一个参数，即要请求的资源的URL。它返回一个 Promise 对象，这意味着你可以使用 .then() 和 .catch() 方法来处理响应。

fetch('https://api.example.com/data')
  .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 was a problem with your fetch operation:', error);
  });

fetch 的参数

fetch 函数可以接受第二个可选参数，这是一个配置对象，它允许你自定义请求的行为。

fetch('https://api.example.com/data', {
  method: 'GET', // 可以是GET、POST、PUT、DELETE等
  headers: {
    'Content-Type': 'application/json',
    // 可以添加其他HTTP头信息
  },
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2',
  }), // 对于POST或PUT请求，可以添加请求体
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

处理不同类型的响应

fetch 会解析服务器返回的任何响应，无论状态码如何。这意味着即使服务器返回了404或500等错误状态码，fetch 仍然会返回一个成功的Promise。你需要检查响应的状态码来确定请求是否成功。

fetch('https://api.example.com/data')
  .then(response => {
    if (response.ok) {
      return response.json(); // 如果成功，解析JSON
    }
    throw new Error('Something went wrong');
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

并发请求

由于 fetch 返回一个 Promise，你可以很容易地并发执行多个请求，并在所有请求完成后处理结果。

Promise.all([
  fetch('https://api.example.com/data1'),
  fetch('https://api.example.com/data2'),
  fetch('https://api.example.com/data3')
]).then(responses => {
  Promise.all(responses.map(response => response.json()))
    .then(data => {
      // 所有请求的数据都在这里
      console.log(data);
    });
})
.catch(error => console.error('One of the requests failed:', error));

取消 fetch 请求

由于 fetch 不直接支持请求取消，你需要使用 AbortController 来实现这一功能。

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
  });

// 取消请求
controller.abort();

总结

fetch API 提供了一个现代、灵活的方式来处理网络请求，它使用 Promise 使得异步代码更加简洁。通过配置对象，你可以自定义请求的方法、头信息和请求体。同时，fetch 也支持并发请求和取消请求。然而，由于 fetch 不会自动处理错误状态码，开发者需要手动检查响应的状态码来确定请求是否成功。掌握 fetch 的使用，将大大提高你在Web开发中的效率和灵活性。