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 的理由主要有几点：
async/await 语法结合，异步代码写起来几乎和同步代码一样顺滑，大大提升开发效率和代码可维护性。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 是 <input type="file"> 元素
fetch('/upload', {
method: 'POST',
body: formData // fetch 会自动设置 Content-Type 为 multipart/form-data
});这里 fetch 会自动处理 Content-Type 头，你不需要手动设置 multipart/form-data。
这些高级选项让 fetch 不仅仅是一个简单的 HTTP 客户端，它能够处理各种复杂的网络场景，让开发者对请求的生命周期和行为有更强的掌控力。虽然刚开始学可能觉得选项有点多，但一旦掌握了，你会发现它们都是解决特定问题的利器。
以上就是JavaScript的fetch API是什么？如何发起网络请求？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
372
