fetch api 是现代 web 开发中用于发起网络请求的核心工具。1. 它基于 promise，简化了异步操作，替代了传统的 xmlhttprequest；2. 支持多种 http 方法如 get、post 及文件上传等；3. 提供更直观的错误处理机制，区分网络错误与 http 错误；4. 通过 abortcontroller 实现请求取消或超时控制；5. 拥有丰富的配置选项，如自定义 headers、跨域模式、凭证控制、缓存策略等，使其具备强大的灵活性和控制能力。
JavaScript 的 fetch API 是现代 Web 开发中用于发起网络请求的核心工具。它提供了一种更强大、更灵活的方式来替代传统的 XMLHttpRequest，通过基于 Promise 的接口，让异步操作的管理变得直观许多，大大简化了数据获取的流程。你可以用它来发送各种类型的 HTTP 请求，比如获取数据、提交表单、上传文件等等。
解决方案
发起一个网络请求，最基本的就是使用 fetch() 函数。它至少需要一个参数，那就是你想要请求的资源路径。
// 发起一个GET请求fetch('https://api.example.com/data') .then(response => { // 检查响应是否成功 (HTTP状态码在200-299之间) if (!response.ok) { // 如果不是，抛出一个错误，让后续的.catch捕获 throw new Error(`HTTP error! status: ${response.status}`); } // 解析JSON格式的响应体 return response.json(); }) .then(data => { // 处理获取到的数据 console.log('数据已获取:', data); }) .catch(error => { // 捕获任何网络错误或上面抛出的HTTP错误 console.error('获取数据时发生错误:', error); });// 发起一个POST请求并发送JSON数据const postData = { name: '张三', age: 30};fetch('https://api.example.com/users', { method: 'POST', // 指定请求方法 headers: { 'Content-Type': 'application/json' // 告诉服务器我们发送的是JSON }, body: JSON.stringify(postData) // 将JavaScript对象转换为JSON字符串}) .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); // 或者 response.text() 如果预期是文本 }) .then(data => { console.log('用户创建成功:', data); }) .catch(error => { console.error('创建用户时发生错误:', error); });
fetch与XMLHttpRequest有什么不同？为什么我应该选择fetch？
说实话，我刚接触 fetch 的时候，第一感觉就是“这玩意儿比 XMLHttpRequest (XHR) 简洁太多了”。以前用 XHR，你需要手动监听各种事件（onload、onerror、onprogress），处理状态码，而且回调嵌套多了，代码就变得特别难以维护，就是所谓的“回调地狱”。那种感觉，就像你在一个迷宫里找出口，每一步都得小心翼翼地挂上钩子，生怕哪个环节断了。
立即学习“Java免费学习笔记（深入）”；
fetch 彻底改变了这一切。它基于 Promise，这意味着你可以使用 .then() 和 .catch() 来链式处理异步操作，代码读起来就像同步代码一样，逻辑清晰得多。一个 fetch 请求会返回一个 Promise，这个 Promise 解析为一个 Response 对象。这个 Response 对象非常强大，它包含了响应的所有信息，比如 status (HTTP状态码)、ok (一个布尔值，表示状态码是否在 200-299 之间)、headers 等等。最方便的是，它提供了 json()、text()、blob() 等方法来异步解析响应体，这些方法本身也返回 Promise，进一步简化了数据处理。
我个人觉得，选择 fetch 的理由主要有几点：
现代化和简洁：代码量明显减少，可读性大幅提升。Promise 原生支持：与 async/await 语法结合，异步代码写起来几乎和同步代码一样顺滑，大大提升开发效率和代码可维护性。更强大的 API：Request 和 Response 对象提供了更细致的控制和信息访问能力。例如，你可以轻松地检查响应头、处理不同类型的数据流。流式处理能力：fetch 可以处理响应流，这对于处理大文件下载或实时数据流非常有用，虽然日常开发中可能不常用，但关键时刻能派上大用场。
所以，除非你需要支持一些非常老的浏览器（fetch 在 IE 浏览器上需要 Polyfill），否则 fetch 几乎是现代 Web 开发中发起网络请求的首选。它让网络请求这个曾经的痛点，变得没那么让人头疼了。
如何处理fetch请求中的错误和异常？
处理 fetch 请求中的错误，说起来有点意思，因为它不像 XMLHttpRequest 那样，只要 HTTP 状态码不是 2xx 就直接进 onerror。fetch 的 Promise 在遇到网络错误（比如断网、DNS解析失败）时才会 reject。但如果服务器返回了 4xx 或 5xx 这样的 HTTP 错误状态码，fetch 的 Promise 依然会成功解析（resolve），只不过 Response 对象的 ok 属性会是 false。这刚开始可能会让人有点困惑，因为你可能会期待所有非成功的响应都直接进 .catch()。
所以，正确的错误处理姿势通常是这样的：
网络错误：使用 .catch() 捕获。这是处理真正网络中断、请求无法发送或接收的情况。
fetch('/api/nonexistent-endpoint') // 假设这个端点不存在，会是网络错误或跨域问题 .then(response => response.json()) .catch(error => { console.error('网络请求失败:', error); // 比如 TypeError: Failed to fetch });
HTTP 错误（4xx, 5xx）：在 .then() 链中检查 response.ok 属性。如果 response.ok 为 false，你就应该手动抛出一个错误。
fetch('/api/unauthorized') // 假设返回401 Unauthorized .then(response => { if (!response.ok) { // 抛出带有状态码和文本的错误 return response.text().then(text => { throw new Error(`HTTP 错误! 状态: ${response.status}, 消息: ${text}`); }); } return response.json(); }) .then(data => console.log('数据:', data)) .catch(error => { console.error('处理请求时发生错误:', error); // 捕获到我们自己抛出的错误 });
这里 response.text() 也是一个 Promise，所以需要再 .then() 一次来获取错误消息。这确实是 fetch 在错误处理上稍微有点“绕”的地方，需要多写一行。
请求超时或取消：fetch 本身没有内置超时机制，但你可以通过 AbortController 来实现。这对于用户长时间等待或者页面跳转时取消未完成的请求非常有用。
const controller = new AbortController();const signal = controller.signal;// 设置一个超时定时器const timeoutId = setTimeout(() => controller.abort(), 5000); // 5秒后取消请求fetch('/api/long-running-task', { signal }) .then(response => { clearTimeout(timeoutId); // 请求成功，清除定时器 if (!response.ok) { throw new Error(`HTTP 错误! 状态: ${response.status}`); } return response.json(); }) .then(data => console.log('任务完成:', data)) .catch(error => { clearTimeout(timeoutId); // 捕获到错误，也清除定时器 if (error.name === 'AbortError') { console.warn('请求被取消或超时:', error.message); } else { console.error('请求失败:', error); } });// 可以在需要时手动取消// controller.abort();
AbortController 抛出的错误 name 是 AbortError，你可以根据这个来区分是超时/取消还是其他类型的错误。这种细致的错误处理，能让你的应用在面对各种网络状况时更加健壮。
fetch API有哪些高级用法和配置选项？
fetch 的强大之处远不止于简单的 GET 和 POST。它的第二个参数是一个 options 对象，里面包含了大量可配置的选项，让你能精细控制请求的方方面面。我这里挑几个我个人觉得特别有用或容易被忽视的：
自定义请求头 (Headers)：这是最常用的一个。你可以通过 headers 选项来添加自定义的 HTTP 头，比如认证 token、内容类型等。
fetch('/api/protected-data', { headers: { 'Authorization': 'Bearer your_jwt_token', 'X-Custom-Header': 'HelloFetch' }});
你也可以创建一个 Headers 对象来更结构化地管理请求头：
const myHeaders = new Headers();myHeaders.append('Content-Type', 'application/json');myHeaders.append('Accept', 'application/json');fetch('/api/users', { method: 'POST', headers: myHeaders, body: JSON.stringify({ name: 'Alice' })});
跨域请求模式 (mode)：这个选项决定了请求的跨域行为。
cors (默认)：允许跨域请求，但受 CORS 策略限制。no-cors：用于向其他源发出请求，但响应会被浏览器限制，你无法访问响应头或状态码，只能用于发送请求。这主要是为了兼容一些遗留系统，不推荐在常规场景使用。same-origin：只允许同源请求。
fetch('https://another-domain.com/data', { mode: 'cors' });
凭证模式 (credentials)：控制是否随请求发送 cookies、HTTP 认证信息等凭证。
omit (默认)：不发送任何凭证。same-origin：只在同源请求时发送凭证。include：无论是否跨域，都发送凭证。如果你需要跨域携带 cookies，就必须设置这个。
fetch('https://api.example.com/profile', { credentials: 'include' });
缓存控制 (cache)：决定请求如何与 HTTP 缓存交互。
default：遵循浏览器默认的缓存行为。no-store：不使用缓存，也不将响应存储到缓存。reload：强制从网络获取新资源，不使用缓存，但会将新响应存储到缓存。no-cache：在发送请求前，会先验证缓存副本是否过期。force-cache：强制使用缓存，即使过期也用，除非没有缓存。only-if-cached：只在缓存中有副本时才使用，否则失败。
fetch('/api/data', { cache: 'no-cache' });
发送文件 (FormData)：对于文件上传或发送复杂的表单数据，FormData 对象是你的好帮手。
const formData = new FormData();formData.append('username', 'JohnDoe');formData.append('profilePic', myFileInput.files[0]); // myFileInput 是 元素fetch('/upload', { method: 'POST', body: formData // fetch 会自动设置 Content-Type 为 multipart/form-data});
这里 fetch 会自动处理 Content-Type 头，你不需要手动设置 multipart/form-data。
这些高级选项让 fetch 不仅仅是一个简单的 HTTP 客户端，它能够处理各种复杂的网络场景，让开发者对请求的生命周期和行为有更强的掌控力。虽然刚开始学可能觉得选项有点多，但一旦掌握了，你会发现它们都是解决特定问题的利器。
以上就是JavaScript的fetch API是什么？如何发起网络请求？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1509433.html
微信扫一扫 
支付宝扫一扫 
