async/await的奇特表现：为何仅在Chrome控制台可运行？

这问题挺典型的，我来帮你理清楚背后的逻辑：

1. Chrome控制台的特殊支持：顶级await #

Chrome DevTools的控制台从Chrome 62版本开始，就支持顶级await特性——简单说就是允许你在async函数外部直接使用await关键字，不需要强制把代码包裹在async function里。

你写的这段代码：

var _response = await (await fetch('https://reqres.in/api/users?page=2').then(res => res.json())); 
console.log(_response);

其实可以拆解成两步执行：

• 先通过await fetch(...)拿到响应对象，调用res.json()后返回一个新的Promise
• 再用外层的await等待这个Promise完成，最终拿到解析后的JSON数据

因为控制台允许顶级await，所以这段代码能正常执行。

2. React项目和Babel编译报错的原因：遵循ES标准 #

在标准的JavaScript语法规范里，await只能出现在async函数的内部，这是ECMAScript的硬性规则。

React项目里的代码通常会经过Babel编译，而Babel默认严格遵循ES标准——当它检测到你在非async函数环境下使用await时，就会抛出Unexpected token的语法错误，因为这不符合标准语法逻辑。同样，像repl.it的Babel编译器也是严格遵循标准的，所以也会触发相同报错。

正确的写法示例 #

如果要在React项目或者常规JS环境里运行这段代码，你需要把它包裹在async函数中：

async function fetchUsers() {
  const response = await fetch('https://reqres.in/api/users?page=2');
  const _response = await response.json();
  console.log(_response);
}

// 调用函数
fetchUsers();

要是在React组件中使用，推荐在useEffect钩子内部嵌套async函数（注意不要直接把async函数传给useEffect）：

import { useEffect } from 'react';

function UserList() {
  useEffect(() => {
    async function fetchUsers() {
      const response = await fetch('https://reqres.in/api/users?page=2');
      const data = await response.json();
      console.log(data);
    }
    fetchUsers();
  }, []);

  return <div>User List</div>;
}

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