JavaScript中Fetch函数执行顺序异常问题求助

这是JavaScript异步非阻塞执行机制导致的典型问题，fetch属于异步网络请求，会被放入任务队列等待主线程的同步代码执行完毕后才会处理，所以你看到的输出顺序是正常的异步执行结果。

执行流程拆解 #

1. 同步执行console.log("Before Fetch")，直接输出内容。
2. 调用fetchData()后，内部的fetch请求被浏览器发送，但JavaScript不会等待请求完成，立刻继续执行后续同步代码。
3. 同步执行console.log("Code after Fetch")，输出内容。
4. 主线程同步代码全部执行完毕后，才会处理任务队列中的fetch回调：拿到响应后解析文本，再调用processData输出数据。

正确解决办法 #

方法1：用async/await包裹调用逻辑

把调用代码放到一个async函数中，通过await阻塞异步操作的后续代码，确保顺序符合预期：

async function init() {
    console.log("Before Fetch");
    const data = await fetchData();
    processData(data);
    console.log("Code after Fetch");
}

init();

方法2：将后续代码加入Promise链

把依赖异步结果的后续代码放到.then()回调中，保证在异步操作完成后执行：

console.log("Before Fetch");
fetchData()
    .then(processData)
    .then(() => {
        console.log("Code after Fetch");
    });

关键说明 #

JavaScript的异步操作不会阻塞主线程，所以不能指望异步代码和同步代码按书写顺序同步执行。必须通过async/await或Promise链式调用，明确指定代码的执行顺序，才能让依赖异步结果的代码在正确时机运行。

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