登录
首页 >  文章 >  前端

FetchAPI教程与实战代码详解

时间：2025-08-12 21:27:31 132浏览 收藏

Fetch API是现代Web开发中不可或缺的网络请求工具，本文将带你从入门到精通，掌握其核心用法和高级技巧。作为基于Promise的解决方案，Fetch API简化了异步操作，告别回调地狱，支持GET、POST等多种请求方式，并通过配置对象灵活设置请求头和请求体。相较于传统的XMLHttpRequest，Fetch API语法更简洁，语义更清晰，但需注意其默认不发送cookies且需手动处理HTTP错误状态码。本文还将深入探讨Fetch API的高级用法，如使用AbortController取消请求、通过FormData上传文件、处理不同响应类型以及创建自定义Request和Response对象，助你构建灵活可靠的网络通信机制，提升Web应用的性能与用户体验。无论你是初学者还是有经验的开发者，都能从中获益。

Fetch API是现代Web开发中基于Promise的网络请求工具，它通过链式调用和async/await语法简化异步操作，支持GET、POST等请求，并可通过配置对象设置请求头、请求体等；与XMLHttpRequest相比，Fetch语法更简洁、语义更清晰，但默认不发送cookies且不自动reject HTTP错误状态码，需手动检查response.ok来捕获4xx/5xx错误；其高级用法包括使用AbortController取消请求、通过FormData上传文件、调用.text()/.blob()等方法处理不同响应类型，以及创建自定义Request和Response对象，适用于复杂场景如请求拦截、缓存和Service Worker，从而构建灵活可靠的网络通信机制。

Fetch API如何使用

Fetch API，说实话，它就是现代Web开发里进行网络请求的一个利器。它基于Promise，这意味着你可以用一种更现代、更链式的方式去处理异步操作，告别过去那种回调地狱的烦恼。简单来说，你需要一个URL，然后Fetch会帮你把数据“抓”回来。

Fetch API的使用，核心思路就是调用 fetch() 函数，它会返回一个Promise。这个Promise解析后会得到一个Response对象，然后你通常需要再调用Response对象上的方法（比如.json()或.text()）来解析响应体，这又会返回一个新的Promise。

解决方案

最基础的用法，一个GET请求：

fetch('https://api.example.com/data')
  .then(response => {
    // 检查HTTP状态码，确保请求成功
    if (!response.ok) {
      // 抛出错误，让catch块捕获
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    // 解析JSON响应体
    return response.json();
  })
  .then(data => {
    console.log('获取到的数据:', data);
  })
  .catch(error => {
    // 处理网络错误或上面throw的错误
    console.error('Fetch操作中出现问题:', error);
  });

发送POST请求，或者需要配置请求头、请求体时，fetch()函数可以接受第二个参数，一个配置对象：

const postData = {
  title: '我的新文章',
  body: '这是一篇关于Fetch API的文章内容。',
  userId: 1
};

fetch('https://api.example.com/posts', {
  method: 'POST', // 请求方法
  headers: {
    'Content-Type': 'application/json', // 告诉服务器发送的是JSON
    'Authorization': 'Bearer your_token_here' // 认证信息
  },
  body: JSON.stringify(postData) // 将JavaScript对象转换为JSON字符串
})
.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('创建文章失败:', error);
});

当然，现在大家更喜欢用async/await来写异步代码，它让Promise链看起来更像同步代码，可读性确实好不少：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log('使用async/await获取到的数据:', data);
  } catch (error) {
    console.error('使用async/await时Fetch操作出现问题:', error);
  }
}

fetchData();

Fetch API与XMLHttpRequest有哪些显著区别？

刚开始接触Fetch API时，可能不少人会想到它和老牌的XMLHttpRequest（XHR）有什么不同。我个人觉得，Fetch最让人省心的地方就是它基于Promise的设计，这直接解决了XHR时代复杂的回调嵌套问题。XHR需要手动监听各种事件（onload, onerror, onprogress），代码写起来比较冗长，而且处理异步逻辑时很容易陷入“回调地狱”。Fetch则通过.then().catch()链式调用，让异步流程清晰明了，配合async/await更是简洁得不像话。

另一个关键区别是，Fetch API默认不发送或接收cookies，除非你明确设置了credentials选项。这在处理跨域请求时尤其重要，它提供了更细粒度的控制。此外，Fetch的API设计更贴近HTTP语义，比如Response对象直接提供了ok属性来判断响应是否成功（2xx状态码），而不需要你手动检查status码范围。但话说回来，Fetch也并非完美无缺，比如它不像XHR那样可以直接监听上传进度（onprogress），或者直接取消请求（虽然现在有了AbortController来弥补）。

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

错误处理在任何网络请求中都是一个核心环节。Fetch API在这方面，我得提醒一句，它默认情况下，即使服务器返回了4xx或5xx的HTTP错误状态码（比如404 Not Found或500 Internal Server Error），fetch()返回的Promise也不会被reject。它只有在网络错误（比如断网、DNS解析失败）或者请求被阻止（比如CORS策略）时才会reject。

所以，为了捕获HTTP错误，你需要在第一个.then()块里手动检查Response对象的ok属性。response.ok是一个布尔值，如果HTTP状态码在200-299范围内，它就是true。否则，你就需要手动抛出一个错误，让后续的.catch()块来处理。

fetch('https://api.example.com/nonexistent-endpoint')
  .then(response => {
    if (!response.ok) {
      // 这里的response.status就是404，response.statusText可能是"Not Found"
      throw new Error(`服务器返回错误: ${response.status} ${response.statusText}`);
    }
    return response.json(); // 或者response.text()，根据实际情况
  })
  .then(data => console.log(data))
  .catch(error => {
    // 这个catch会捕获网络错误，也会捕获上面手动throw的HTTP错误
    console.error('请求失败或处理响应时出错:', error.message);
  });

这种分离处理 HTTP 错误和网络错误的方式，一开始可能会让人有点不适应，但它确实提供了更细致的错误分类能力。网络错误通常是不可恢复的，而HTTP错误则可能需要根据具体的状态码进行不同的业务逻辑处理。

Fetch API在实际开发中有哪些高级用法？

Fetch API在日常开发中远不止GET和POST那么简单，它有很多高级用法能让你的网络请求更灵活、更强大。

  1. 取消请求 (AbortController): 这绝对是Fetch一个非常重要的补充。想想看，如果你在做一个搜索框，用户快速输入，每次输入都发请求，之前的请求就没必要继续了。AbortController就是为此而生。

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

setTimeout(() => controller.abort(), 5000); // 5秒后取消请求

fetch('https://api.example.com/long-running-task', { signal })
  .then(response => response.json())
  .then(data => console.log('数据:', data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch请求被取消了。');
    } else {
      console.error('Fetch错误:', error);
    }
  });

  2. 发送表单数据 (FormData): 如果你需要上传文件或者发送复杂的表单数据，FormData对象是你的好帮手。它会自动设置Content-Type为multipart/form-data，你不需要手动去处理。

    const formData = new FormData();
formData.append('username', 'JohnDoe');
formData.append('profilePicture', myFileInput.files[0]); // myFileInput是<input type="file">元素

fetch('https://api.example.com/upload', {
  method: 'POST',
  body: formData // 直接传递FormData对象
})
.then(response => response.json())
.then(data => console.log('上传成功:', data))
.catch(error => console.error('上传失败:', error));

  3. 处理不同类型的响应体: 除了.json()，Response对象还提供了.text()（获取纯文本）、.blob()（获取二进制大对象，常用于文件下载）、.arrayBuffer()（获取通用的二进制数据缓冲区）等方法，满足你对不同数据格式的需求。

  4. 自定义Request和Response对象: 你甚至可以先创建Request对象，再把它传给fetch()，这在需要复用相同请求配置或者拦截请求时很有用。

    const myRequest = new Request('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'X-Custom-Header': 'MyValue'
  }
});

fetch(myRequest)
  .then(response => response.json())
  .then(data => console.log('自定义请求获取的数据:', data));

    类似地，你也可以创建一个Response对象来模拟响应，这在测试或Service Worker中非常有用。

这些高级用法让Fetch API在各种复杂的Web应用场景中都能游刃有余，它提供了一个强大而灵活的基础，供我们构建健壮的网络层。

以上就是《FetchAPI教程与实战代码详解》的详细内容，更多关于的资料请关注golang学习网公众号！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>