为何回调函数在fetch请求结果打印前执行？如何修正？

问题分析 #

你的代码中，_callback()是在发起fetch请求后同步执行的，并没有等待fetch的异步操作（网络请求+JSON解析）完成，所以才会出现回调日志先打印、异步请求结果后打印的顺序颠倒问题。

解决方案1：调整回调的调用时机（基于现有回调模式） #

将_callback()移动到fetch的then链的最后一步，确保只有当异步请求和数据解析全部完成后，才执行回调：

function functionOne(_callback) {
  let fetchRes = fetch("https://jsonplaceholder.typicode.com/todos/1");
  
  fetchRes.then(res => res.json()).then(d => {
    console.log(d);
    _callback(); // 等待异步操作完成后再调用回调
  });
}

function functionTwo() {
  functionOne(() => {
    console.log("I am a callback, I should come last");
  });
}

functionTwo();

解决方案2：使用Async/Await（更现代的异步处理方式） #

改用ES6+的async/await语法可以让逻辑更清晰，避免回调嵌套：

async function functionOne() {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const d = await res.json();
  console.log(d);
}

async function functionTwo() {
  await functionOne(); // 等待异步函数执行完成
  console.log("I am a callback, I should come last");
}

functionTwo();

这种写法通过await直接等待异步操作完成，代码可读性更强，也不需要额外的回调函数嵌套。

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