在Web开发中，Fetch API 是一个现代的、基于Promise的HTTP客户端，用于在浏览器中发送请求并获取响应，Fetch API 提供了一种简单而强大的方式来处理网络请求，但它本身并不会在请求失败时自动报错，以下是关于Fetch API的一些关键信息,包括如何正确处理错误。

Fetch API 简介

Fetch API 允许你以编程方式发起跨网络请求，它基于Promise，这意味着你可以使用.then()和.catch()方法来处理成功和失败的响应。

使用Fetch API

以下是一个使用Fetch API的基本示例：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

Fetch不会报错

为什么Fetch不会自动报错？

Fetch API不会在请求失败时自动报错，因为它设计为返回一个Promise对象，这个Promise对象在请求成功时解析为响应对象，在请求失败时拒绝,错误处理需要手动进行。

如何处理Fetch请求中的错误？

1. 检查响应状态：检查响应对象的ok属性，如果ok为false,则表示请求失败。

   

2. 使用catch方法：在.then()链的末尾添加.catch()方法来捕获并处理错误。

3. 自定义错误处理：你可以创建自定义错误处理函数,以更详细地处理不同类型的错误。

示例：错误处理

以下是如何在Fetch请求中处理错误的示例：

fetch('https://api.example.com/data')
  .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);
  });

Fetch API vs. XMLHttpRequest

FAQs

Q1：Fetch API是否支持所有HTTP方法？ A1：是的，Fetch API支持所有HTTP方法，包括GET、POST、PUT、DELETE等。

Q2：Fetch API是否支持CORS（跨源资源共享）？ A2：Fetch API支持CORS，这意味着你可以从不同的源发起请求，只要服务器支持跨源请求，如果不支持,浏览器会抛出一个错误。