使用 fetch() 发起请求后，调用返回 promise 的 .json() 方法即可将 mpg 数据解析为 javascript 对象。该操作会自动处理 http 状态码并转换 json 字符串，最终在 then 回调或 await 表达式中直接获取包含 mpg 数值的结构化数据。
如何获取并解析 MPG 响应体
通过 fetch() 获取响应流后，必须显式调用 .json() 才能完成从字节流到对象的转换。此方法读取整个响应体并执行 JSON 解析，若格式错误会抛出异常。成功时返回一个包含 MPG 字段的普通对象，可直接访问其属性。
const url = '/api/vehicle/mpg';
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log(data.mpg);
})
.catch(error => {
console.error('Fetch error:', error);
});上述代码针对标准 REST API 设计。第一步检查 response.ok 确保 HTTP 状态在 200-299 之间。第二步 response.json() 返回另一个 Promise，其 resolve 值为解析后的对象。第三步在 data 中直接读取 mpg 属性。若接口返回的是数组或其他结构，需相应调整访问路径。错误处理捕获网络故障或 JSON 解析失败的情况。
立即学习“Java免费学习笔记（深入）”；
如何处理异步上下文中的 MPG 数据
在支持 async/await 的环境中，可以将 fetch 调用包裹在异步函数内，使代码呈现同步风格。这种方式简化了错误处理和变量赋值逻辑，特别适合需要基于 MPG 值进行后续计算的场景。
async function getMpgData() {
try {
const response = await fetch('/api/vehicle/mpg');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data.mpg;
} catch (error) {
console.error('Failed to fetch MPG:', error);
return null;
}
}该实现将网络请求和 JSON 解析合并为顺序执行的步骤。await fetch(...) 等待响应对象就绪，随后 await response.json() 等待数据解析完成。任何一步失败都会跳转到 catch 块。返回值直接是 MPG 数值或 null。这种模式避免了嵌套回调，提高了可读性。注意 async 函数始终返回 Promise，调用者仍需处理其异步特性。
MPG 数据为空或类型不符时程序行为如何
当接口返回空响应体或非 JSON 内容时，.json() 方法会抛出 SyntaxError。若 JSON 结构中缺少 mpg 字段，访问 data.mpg 将返回 undefined。程序不会自动填充默认值，需开发者显式处理缺失情况。
const mockResponse = { "status": "ok" };
console.log(mockResponse.mpg); // undefined
const emptyJson = "";
JSON.parse(emptyJson); // SyntaxError第一段代码演示了属性不存在时的静默失败，返回 undefined 而非报错。第二段代码展示了无效 JSON 字符串导致的解析异常。在实际应用中，应添加默认值逻辑，例如 const mpg = data.mpg ?? 0;。这确保即使数据缺失，后续计算也不会因 NaN 而中断。同时，网络层错误已通过 try/catch 捕获，形成完整防护。
