React调用async function报Unexpected reserved word 'await'错误如何解决

问题原因 #

• 触发报错的直接原因是：await关键字只能在被async修饰的函数内部使用，你将await写在了useEffect的普通回调函数中，该回调没有添加async修饰，因此JS引擎将await识别为非法保留字抛出错误。你给被调用的fetchMovieFunction添加async不影响调用方的语法规则，调用方要使用await本身也必须是异步函数。
• 你的代码还存在多个隐含逻辑错误，会导致你修复语法报错后依然无法拿到正确结果：
  1. Helper类的fetchMovieFunction冗余封装了一层Promise（async函数本身默认返回Promise），同时fetch的回调链逻辑完全错误：第一个then接收的是请求响应对象而非错误，且你没有对fetch返回的Response对象做JSON解析就直接读取属性，永远拿不到正确的海报路径。
  2. 你在useEffect中调用setRandomMovie后直接读取randomMovie状态，React的状态更新是异步的，此时读取到的还是更新前的旧值，请求参数会出错。
  3. 你在fetchMovieFunction中访问this.myInit，但myInit是挂载在this.state下的属性，直接访问this.myInit会拿到undefined，请求配置不生效。

修复方案 #

1. 修复Game组件的调用逻辑 #

注意不要直接给useEffect的回调加async，因为useEffect期望回调返回清理函数或undefined，async函数返回的Promise会触发React警告，需要在useEffect内部声明异步函数再执行：

const helper = new Helper();

function Game() {
  useEffect(() => {
    // 内部声明异步请求函数
    const getMovieData = async () => {
      // 直接把生成的随机数存为变量使用，避免依赖异步更新的state
      const newRandomMovie = Math.floor(Math.random() * (500 - 1) + 1);
      setRandomMovie(newRandomMovie);
      const { poster_path, error } = await helper.fetchMovieFunction(newRandomMovie);
      if (error) {
        return console.log({error});
      }
      setApiMovieResponse({poster_path});
    }
    // 执行异步函数
    getMovieData();
  }, [page]);
  // 原return ()语法错误，需返回合法JSX或null
  return null;
}

2. 修复Helper类的请求逻辑 #

class Helper {
  constructor() {
    this.state = {
      movieAnswer: {},
      profile_path: "",
      poster_path: "",
      myInit: { method: "GET", mode: "cors" }
    }
  }

  fetchMovieFunction = async (randomMovie) => {
    try {
      // 从this.state读取请求配置
      const response = await fetch(`${MOVIE_KEY}${randomMovie}?api_key=${API_KEY}`, this.state.myInit);
      // 解析响应为JSON格式
      const movieData = await response.json();
      return { poster_path: movieData.poster_path };
    } catch (error) {
      // 捕获所有请求异常返回
      return { error };
    }
  }
}

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