fetch api基于promise，提供异步请求能力，替代xmlhttprequest。1. fetch调用后返回promise，解析为response对象，即使http状态码为404或500也不会reject，需手动检查response.ok判断业务成功与否；2. 响应数据需通过response.json()、text()等方法解析，这些方法同样返回promise；3. 错误处理时，网络错误或cors阻止才会触发catch，业务错误需主动抛出并捕获以提供详细提示；4. 使用abortcontroller可实现请求取消与超时控制；5. fetch优势在于代码简洁、支持async/await、默认处理cors及流式响应；6. 优化性能可通过缓存、减少请求、合理并发、加载指示器、预加载和乐观更新等方式提升用户体验。
fetch API是现代浏览器中用于异步数据请求的核心工具，它基于Promise，提供了一种更简洁、强大的方式来替代传统的XMLHttpRequest。简单来说，它让你能以非阻塞的方式从服务器获取或发送数据，而不会冻结用户的界面。
在我看来，掌握fetch API的关键在于理解它如何与Promise协同工作，以及它处理响应的“两段式”结构。当你调用fetch(url, options)时，它立即返回一个Promise。这个Promise在网络请求完成（无论成功还是失败）后会解析成一个Response对象。
这里有个我个人觉得初学者最容易混淆的地方：即使服务器返回了像404（未找到）或500（服务器内部错误）这样的HTTP状态码，fetch的Promise也不会被拒绝（reject）。它只有在网络错误（比如断网）或者请求被阻止（比如CORS策略）时才会reject。这意味着，你需要手动检查Response对象的ok属性（一个布尔值，表示HTTP状态码是否在200-299之间）来判断请求是否“业务成功”。
获取到Response对象后，数据本身并不是直接可用的。你需要调用response.json()、response.text()、response.blob()等方法来解析响应体。这些方法同样返回Promise，因为解析过程也可能是异步的，特别是当数据量很大时。
最常见的用法是结合async/await语法，这让异步代码看起来更像同步代码，可读性大大提升：
async function fetchData(url) {
try {
const response = await fetch(url);
// 检查HTTP状态码是否成功
if (!response.ok) {
// 抛出错误，让try...catch捕获
const errorData = await response.json(); // 尝试解析错误信息
throw new Error(`HTTP error! status: ${response.status}, message: ${errorData.message || '未知错误'}`);
}
const data = await response.json(); // 解析JSON数据
console.log(data);
return data;
} catch (error) {
console.error('获取数据时发生错误:', error);
// 这里可以进行错误上报或者用户提示
throw error; // 重新抛出错误，以便上层调用者处理
}
}
// 调用示例
fetchData('https://api.example.com/data')
.then(data => {
// 数据成功获取并处理
})
.catch(error => {
// 错误被捕获
});
// 发送POST请求的例子
async function postData(url, data) {
try {
const response = await fetch(url, {
method: 'POST', // 或 'PUT', 'DELETE' 等
headers: {
'Content-Type': 'application/json',
// 'Authorization': 'Bearer your_token' // 如果需要认证
},
body: JSON.stringify(data) // 将JavaScript对象转换为JSON字符串
});
if (!response.ok) {
const errorText = await response.text();
throw new Error(`HTTP error! status: ${response.status}, details: ${errorText}`);
}
const result = await response.json();
console.log('POST请求成功:', result);
return result;
} catch (error) {
console.error('POST请求失败:', error);
throw error;
}
}
// postData('https://api.example.com/submit', { name: 'Alice', age: 30 });fetch的第二个参数options对象非常强大，它允许你配置请求方法（method）、请求头（headers）、请求体（body）、缓存模式（cache）、跨域模式（mode）等等。比如，发送JSON数据时，设置headers中的'Content-Type': 'application/json'和body: JSON.stringify(data)是必不可少的步骤。
处理fetch的错误，确实是个需要细心对待的地方，因为它不像XMLHttpRequest那样，HTTP错误码会直接触发onerror。我个人在项目中，通常会采用以下策略来确保错误处理的健壮性：
首先，也是最核心的一点，是在Promise链中或async/await的try...catch块里，务必检查response.ok属性。如果response.ok为false，那就意味着HTTP状态码不在200-299的成功范围内。这时，我通常会选择手动抛出一个Error对象，这样它就能被后续的.catch()或外层的try...catch块捕获。在抛出错误前，尝试解析响应体来获取服务器返回的错误详情（比如一个包含错误消息的JSON对象），这对于调试和向用户展示具体错误信息非常有帮助。
async function safeFetch(url, options) {
try {
const response = await fetch(url, options);
if (!response.ok) {
let errorInfo = `HTTP Error: ${response.status} ${response.statusText}`;
try {
// 尝试解析JSON错误信息
const errorBody = await response.json();
errorInfo += `, Details: ${JSON.stringify(errorBody)}`;
} catch (parseError) {
// 如果不是JSON，尝试解析为文本
const errorText = await response.text();
errorInfo += `, Details: ${errorText}`;
}
throw new Error(errorInfo);
}
return response; // 返回原始响应，让调用者决定如何解析
} catch (networkError) {
// 捕获网络错误（如断网、CORS阻止等）
console.error('网络或请求配置错误:', networkError.message);
throw new Error(`请求失败，请检查网络连接或稍后再试。 (${networkError.message})`);
}
}
// 使用示例
safeFetch('https://api.example.com/nonexistent')
.then(response => response.json())
.then(data => console.log('数据:', data))
.catch(error => console.error('最终捕获:', error.message));
// 如果需要取消请求，AbortController是你的好朋友
const controller = new AbortController();
const signal = controller.signal;
async function fetchWithTimeout(url, timeout = 5000) {
const abortTimeoutId = setTimeout(() => controller.abort(), timeout);
try {
const response = await fetch(url, { signal });
clearTimeout(abortTimeoutId); // 请求成功，清除定时器
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
clearTimeout(abortTimeoutId); // 发生错误，清除定时器
if (error.name === 'AbortError') {
console.warn('请求已取消或超时');
} else {
console.error('请求失败:', error);
}
throw error;
}
}
// fetchWithTimeout('https://api.example.com/slow-data', 2000)
// .then(data => console.log(data))
// .catch(err => console.error(err.message));
// // 可以在其他地方手动调用 controller.abort() 来取消请求
// // controller.abort();除了上面提到的，我还会在try...catch块中区分网络错误（TypeError，通常是断网、CORS策略等）和业务逻辑错误（通过response.ok判断后手动抛出的）。对于网络错误，通常会给用户一个通用提示，比如“网络连接失败”；对于业务错误，则可以根据服务器返回的具体信息进行更精准的提示。引入AbortController可以实现请求的取消和超时控制，这对于提升用户体验和资源管理至关重要，比如用户在输入框快速键入时，可以取消之前的搜索请求，只保留最新的。
从我个人的开发体验来看，fetch API相对于老旧的XMLHttpRequest（XHR），简直是质的飞跃。最直观的感受就是代码的简洁性和可读性。XHR那套基于事件和回调的模式，很容易导致所谓的“回调地狱”（Callback Hell），尤其是在需要处理多个连续异步操作时，代码层级会变得非常深，难以维护。
fetch则完全拥抱了Promise，这使得它能够与async/await完美结合。这种模式下，你的异步代码看起来和写同步代码几乎一样，大大降低了理解和调试的难度。想象一下，以前你需要监听onload、onerror、onprogress等多个事件，而现在，一个.then()和.catch()（或者try...catch）就能搞定绝大部分情况。
XHR的痛点与Fetch的优势对比：
fetch原生支持Promise，意味着你可以轻松使用.then().catch()链式调用，或者更现代的async/await语法。XHR则需要手动封装Promise，或者依赖第三方库。fetch的API设计更贴近HTTP协议本身，例如，它返回的是一个Response对象，你可以方便地访问各种HTTP头信息、状态码，以及通过不同的方法（json(), text(), blob()等）解析响应体，这比XHR手动解析responseText方便多了。fetch在处理CORS请求时，默认行为更合理，它会根据服务器的CORS策略自动处理预检请求（preflight requests），而XHR在某些情况下需要手动配置withCredentials等。fetch的Response对象支持ReadableStream，理论上可以实现响应体的流式处理，这对于处理大文件下载或实时数据流有潜在优势（虽然实际应用中还需要配合其他API）。XHR则通常需要等待整个响应体下载完成后才能处理。Fetch的典型使用场景：
fetch来与后端API进行数据交换，无论是获取用户列表、商品详情，还是提交表单数据。fetch的简洁性使得组织和管理这些请求变得更加容易。fetch可以很方便地处理FormData对象进行文件上传，或者下载二进制数据（blob()）。fetch作为其底层HTTP请求机制。虽然XHR在某些非常老的浏览器环境中可能仍有兼容性优势，但对于现代Web开发，fetch无疑是首选。它让前端开发者能更专注于业务逻辑，而不是纠缠于复杂的异步回调。
在真实的项目里，光是能用fetch发请求还不够，我们还得考虑如何让它跑得更快、用户体验更好。这不仅仅是代码层面的优化，更关乎产品设计和用户心理。
1. 减少不必要的请求： 这是最直接也最有效的优化。
localStorage或sessionStorage存储一些配置数据、字典数据。每次请求前先检查本地是否有缓存，有就直接用，没有再去fetch。Cache-Control, ETag, Last-Modified）。fetch会尊重这些头信息，如果资源未修改，浏览器会直接从缓存中读取，避免重新下载。2. 优化请求本身：
AbortController： 前面提过，这玩意儿太有用了。用户在搜索框里快速输入，或者在页面跳转前，取消掉之前未完成的请求，避免资源浪费和潜在的竞态条件。Promise.all()进行并发请求，可以大大缩短总等待时间。但对于有依赖关系的请求，则必须串行执行。fetch会自动处理解压。3. 提升用户感知性能： 即使请求本身无法再快，我们也能通过一些手段让用户觉得“快”。
fetch回来，存储在内存中。当用户实际需要时，数据已经准备就绪，几乎是瞬时加载。fetch请求到后端。如果后端返回失败，再回滚UI。这能极大提升用户操作的即时反馈感。当然，这需要谨慎使用，并且要有完善的错误回滚机制。这些优化策略并非相互独立，很多时候需要组合使用。在项目初期就考虑这些，会比后期重构要省力得多。毕竟，一个流畅、响应迅速的应用，是用户留下来的关键。
以上就是fetch API的异步数据获取方法的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
869
