当前位置：首页 > 行业动态 > 正文

fetch api 同步

admin
行业动态
2025-05-02
3051

Fetch API异步，返回Promise，需用await或.then()处理，无同步方法，但可通过这些机制实现类似

Fetch API同步机制解析

Fetch API 的异步本质

基础特性
Fetch API 是基于 Promise 设计的，其核心行为是异步的，调用 fetch() 会立即返回一个 Promise 对象，后续的网络请求和响应处理均在事件循环中异步执行。

代码示例

let response = fetch('https://api.example.com/data');
console.log(response); // 输出 Promise 对象

模拟“同步”行为的方案

方案	实现方式	特点
`async/await`	将 `fetch` 包裹在 `async` 函数中	语法上接近同步，实际仍为异步 `await` 暂停函数执行直到 Promise 完成
同步替代方案（不推荐）	使用 `XMLHttpRequest` 的 `sync` 模式	阻塞主线程，导致界面卡顿仅部分浏览器支持（需设置 `XHR.open(method, url, false)`）

`async/await` 的“伪同步”实现

async function fetchSync(url) {
    const response = await fetch(url); // 暂停执行，等待异步完成
    const data = await response.json();
    return data;
}
// 调用示例
(async () => {
    const result = await fetchSync('https://api.example.com/data');
    console.log(result); // 输出解析后的数据
})();

同步与异步的本质区别

维度	同步 Fetch（假设存在）	实际异步 Fetch
线程阻塞	是（主线程等待）	否（非阻塞）
性能影响	严重（界面冻结）	轻量（事件循环）
浏览器支持	不支持（Fetch 无此模式）	所有现代浏览器
代码风格	顺序执行	依赖回调/Promise

为何避免强制同步？

用户体验
同步请求会阻塞 UI 渲染，导致页面卡死（尤其是网络延迟较高时）。
技术限制
- Fetch API 明确设计为异步，无内置同步选项。
- XMLHttpRequest 的同步模式已被弃用（需主动开启且兼容性差）。
替代方案
- 使用 async/await 优化异步代码可读性。
- 通过 Promise.all 实现多请求并发控制。

相关问题与解答

问题 1：如何让 Fetch 像同步一样按顺序执行？

解答：
通过 async/await 语法可强制按顺序等待每个请求完成，但本质仍是异步。

async function sequentialFetch() {
    const data1 = await fetch('url1').then(res => res.json());
    const data2 = await fetch('url2').then(res => res.json());
    console.log(data1, data2); // 按顺序输出
}