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()

Response

Response

.json()

.text()

解决方案

最基础的用法，一个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

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

.then().catch()

async/await

另一个关键区别是，Fetch API默认不发送或接收cookies，除非你明确设置了

credentials

Response

ok

status

onprogress

AbortController

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

错误处理在任何网络请求中都是一个核心环节。Fetch API在这方面，我得提醒一句，它默认情况下，即使服务器返回了4xx或5xx的HTTP错误状态码（比如404 Not Found或500 Internal Server Error），

fetch()

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

27

查看详情

所以，为了捕获HTTP错误，你需要在第一个

.then()

Response

ok

response.ok

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

以上就是Fetch API如何使用的详细内容，更多请关注php中文网其它相关文章！