JavaScript中fetch内赋值的obj变量为何无法在外部访问

核心原因是fetch属于异步非阻塞API，浏览器端JavaScript是单线程执行模型，碰到异步任务会先将其挂起进入任务队列，优先执行当前所有同步代码，等异步任务（此处为网络请求）执行完成后，才会触发对应的回调函数执行赋值逻辑。

具体到你的代码执行顺序： #

• 同步阶段首先执行变量声明：url赋值为对应字符串、obj声明为undefined
• 碰到fetch调用，将其作为异步任务挂起，继续执行后续同步代码
• 如果你在fetch外部写了console.log(obj)，这一步属于同步代码，会在此时执行，输出undefined
• 等网络请求完成后，才会依次执行.then回调链：先解析响应为json，再给obj赋值，最后执行回调里的打印语句

方案1：将依赖obj的逻辑全部放到回调链中 #

var url = "sadasd";

fetch(url)
  .then(res => res.json())
  .then(obj => {
    // 所有需要用到obj的逻辑都写在这里
    console.log(obj)
  })

方案2：用async/await语法简化异步写法 #

async function getFetchData() {
  const url = "sadasd";
  const res = await fetch(url);
  const obj = await res.json();
  // 所有需要用到obj的逻辑都写在async函数内部await之后
  console.log(obj)
}

getFetchData()

注意：即使使用async/await语法，依然不能在函数外部同步获取obj的值，所有依赖该返回值的逻辑都必须放在异步执行链路中。

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