处理依赖异步函数代码的最佳实践及问题规避方案

问题原因 #

你代码里的getData是异步函数，调用后会立刻返回一个Promise对象，不会阻塞后续同步代码执行。所以console.log("after getData")会先执行，等异步的fetch请求完成、数据解析后，才会打印data，这就导致依赖wordsAndCategory的后续代码拿不到正确数据。

下面是几种处理这类异步依赖的最佳实践：

1. 用async/await包裹依赖逻辑（最推荐） #

把所有依赖异步结果的代码放到一个async函数里，用await等待异步操作完成，确保执行顺序正确：

// 把整个应用初始化逻辑整合到async函数
async function initApp() {
    // 先执行同步的字母渲染逻辑
    const letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
    'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
    const lettersContainer = document.querySelector(".letters");
    letters.forEach(letter => {
        let span = document.createElement("span");
        let spanText = document.createTextNode(letter);
        span.appendChild(spanText);
        lettersContainer.appendChild(span);
    });

    console.log("before getData");
    // 等待getData返回实际数据，而不是Promise
    const wordsAndCategory = await getData("./words.json");
    console.log("after getData");
    
    // 所有依赖wordsAndCategory的代码都写在这里
    console.log("拿到异步数据:", wordsAndCategory);
    // 比如后续的游戏逻辑、DOM操作等
}

// 调用初始化函数启动应用
initApp();

// 保持getData函数，注意要抛出错误让上层处理
async function getData(src) {
    try {
        let data = await fetch(src);
        data = await data.json();
        console.log(data);
        return data;
    } catch (error) {
        console.error("获取数据出错:", error);
        // 抛出错误，让initApp里的await能捕获到
        throw error;
    }
}

这种方式逻辑清晰，代码可读性高，是目前处理异步依赖的主流方式。

2. Promise链式调用（兼容旧场景） #

如果不想用async/await，也可以用Promise的.then()链式处理，确保依赖代码在异步操作完成后执行：

// 先执行同步的字母渲染
const letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
const lettersContainer = document.querySelector(".letters");
letters.forEach(letter => {
    let span = document.createElement("span");
    let spanText = document.createTextNode(letter);
    span.appendChild(spanText);
    lettersContainer.appendChild(span);
});

console.log("before getData");
// 用then接收异步结果，catch处理错误
getData("./words.json")
    .then(wordsAndCategory => {
        console.log("after getData");
        // 依赖代码写在这里
        console.log("拿到异步数据:", wordsAndCategory);
    })
    .catch(error => {
        console.error("数据获取失败:", error);
    });

async function getData(src) {
    try {
        let data = await fetch(src);
        data = await data.json();
        console.log(data);
        return data;
    } catch (error) {
        console.error(error);
        throw error;
    }
}

3. 关键注意事项（规避坑点） #

• 不要直接用async函数的返回值：let wordsAndCategory = getData(...)得到的是Promise对象，不是实际数据，必须用await或.then()提取内部值。
• 做好错误处理：异步操作很容易失败（比如网络问题、JSON格式错误），一定要在getData里抛出错误，上层通过try/catch（async/await场景）或.catch()（Promise场景）处理，避免静默失败。
• 全局作用域别乱用await：非模块环境下，全局作用域不能直接用await，会报错。就算是模块环境，全局await也会阻塞整个脚本，所以最好把逻辑包裹在async初始化函数里。

内容的提问来源于stack exchange，提问作者Abdulaziz