如何将fetch响应赋值给全局变量？为何async函数返回Promise且加await报错？

1. 为什么调用loadUsers()会返回Promise？ #

所有用async关键字声明的函数，不管内部有没有写await，都会自动把返回值包装成Promise对象返回。哪怕你在函数里直接return 123，最终得到的也是Promise.resolve(123)。你的loadUsers是async函数，所以调用它必然得到Promise，而非直接的字符数据。

2. 给loadUsers()加await报错的原因？ #

await只能在async函数内部或者ES模块的顶层作用域中使用。如果你的代码是在普通全局作用域（比如非模块类型的script标签里）直接写let chars = await loadUsers()，就会触发语法错误——因为当前上下文不是async函数。

错误示例：

// 普通全局作用域，执行会报错
let chars = await loadUsers();

3. 如何将fetch响应赋值给全局变量？ #

有两种实用方案：

方案一：用自执行async函数包裹 #

把赋值逻辑放在async函数内部，或者直接用自执行的async函数：

const loadUsers = async () => {
  const res = await fetch('https://www.breakingbadapi.com/api/characters')
  const json = await res.json()
  return json
}

// 提前声明全局变量
let chars;

// 自执行async函数完成赋值
(async () => {
  chars = await loadUsers();
  // 这里可以安全使用chars
})();

方案二：借助Promise的then方法 #

利用Promise链式调用，在回调里完成全局变量赋值：

const loadUsers = async () => {
  const res = await fetch('https://www.breakingbadapi.com/api/characters')
  const json = await res.json()
  return json
}

let chars;
loadUsers().then(data => {
  chars = data;
  // 回调内可以直接使用chars
});

注意：两种方式下chars的赋值都是异步操作，在赋值完成前直接访问会得到undefined，必须确保在异步操作完成后再使用该变量。

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