Fetch API如何使用

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，说实话，它就是现代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应用场景中都能游刃有余，它提供了一个强大而灵活的基础，供我们构建健壮的网络层。