JS中使用Async/Await获取fetch结果并赋值给全局变量的问题求助

• 所有async函数的返回值本质是Promise对象，你代码里最后一行的console.log(renderExam())是同步执行逻辑，调用时renderExam内部的异步请求还未完成，因此只会输出pending状态的Promise，不会返回最终的JSON结果
• 全局变量初始为空，你没有在异步逻辑中完成赋值操作，所以同步访问时自然是初始的空数组/undefined

首先直接修改代码，在拿到接口返回结果后给全局变量赋值：

let myArray = [];

async function fetchExam(id) {
  try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
          method: 'GET',
          credentials: 'same-origin'
      });
      const exam = await response.json();
      return exam;
  } catch (error) {
      console.error(error);
  }
}

async function renderExam(id) {
  const exam = await fetchExam(id);
  // 新增这一行给全局变量赋值
  myArray = exam;
  console.log('函数内部的myArray：', myArray);
  return exam;
}

赋值完成后，你需要保证所有使用myArray的逻辑都在异步操作完成后执行，有两种常用实现方式：

1. 使用Promise的.then链式调用

renderExam().then(() => {
  // 这个回调会在异步请求完成、myArray赋值结束后触发，可正常访问myArray
  console.log('then回调里的myArray：', myArray);
})

2. 顶层await（需ES模块环境、Node.js 14.8+版本支持）
   如果你的代码运行在支持顶层await的环境，可以直接在全局作用域等待异步执行完成后再访问变量：

await renderExam();
// 这里已经等待异步执行完成，可正常访问myArray
console.log('全局await后的myArray：', myArray);

• 不要在调用完异步函数后直接用同步逻辑访问全局变量，此时异步请求还未结束，变量还未完成赋值，必然拿到空值/初始值
• 所有依赖异步返回结果的逻辑，都必须放在异步回调、then方法，或者await语句之后执行

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