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那么简单，它有很多高级用法能让你的网络请求更灵活、更强大。
取消请求 (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); } });
发送表单数据 (FormData): 如果你需要上传文件或者发送复杂的表单数据，
FormData
对象是你的好帮手。它会自动设置
Content-Type
为
multipart/form-data
，你不需要手动去处理。
const formData = new FormData();formData.append('username', 'JohnDoe');formData.append('profilePicture', myFileInput.files[0]); // myFileInput是元素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));
处理不同类型的响应体: 除了
.json()
，
Response
对象还提供了
.text()
（获取纯文本）、
.blob()
（获取二进制大对象，常用于文件下载）、
.arrayBuffer()
（获取通用的二进制数据缓冲区）等方法，满足你对不同数据格式的需求。
自定义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如何使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516350.html
微信扫一扫 
支付宝扫一扫 
