如何通过阻塞线程实现同步API调用，让全局可访问接口数据？

开发者阿泽

2026-7-4

解决方案：同步API调用实现全局数据共享

问题背景

需要在首个引入的JS文件中通过阻塞线程的同步API调用获取数据，将结果挂载到window.data，确保后续引入的JS文件能直接访问到该实际数据，且不调整现有文件引入结构、不合并文件、不在异步回调中导入其他文件。

现有代码问题

原代码使用async/await的fetch API，本质仍是异步操作，window.data会被赋值为一个Promise对象，而非接口返回的实际数据，后续JS执行时无法直接拿到结果。

简洁实现方案

fetch不支持同步调用，改用同步XMLHttpRequest（注意：主线程中同步XHR会阻塞页面渲染，仅适用于必须依赖该数据才能继续的场景），修改script1.js如下：

修改后的script1.js

function fetchDataSync() {
    const configUrl = 'https://jsonplaceholder.typicode.com/todos/1';
    const xhr = new XMLHttpRequest();
    
    try {
        // 第三个参数设为false开启同步模式
        xhr.open('GET', configUrl, false);
        xhr.send();

        if (xhr.status >= 200 && xhr.status < 300) {
            const res = JSON.parse(xhr.responseText);
            console.log('data 0:', res);
            return res;
        } else {
            throw new Error(`Network response was not ok: ${xhr.status} - ${xhr.statusText}`);
        }
    } catch (error) {
        console.error('Error fetching data:', error);
        return null;
    }
}

// 同步执行并直接赋值实际数据到window
window.data = fetchDataSync();

console.log("data 1:", window.data);