javascript - 声明一个异步函数

Question

我是 React 的新人我正在尝试调用 async function ，但我得到 Unexpected reserved word 'await'.错误

所以我的异步函数位于 Helper class 中谁应该执行所有 API 调用，我称之为 Helper class在我的Game function

这是我来自 Class Helper 的代码:

class Helper {
      constructor() {
        this.state = {
          movieAnswer: {},
          profile_path:"",
          poster_path:"",
          myInit: { method: "GET", mode: "cors" }
        }
      }
  fetchMovieFunction = async (randomMovie) => {
    return new Promise((resolve) => {
    fetch(`${MOVIE_KEY}${randomMovie}?api_key=${API_KEY}`, this.myInit)
    .then(error => resolve({ error }))
    .then(response => resolve({ poster_path: response.poster_path }));
    }); 
  }

这是我打电话的地方 fetchMovieFunction在我的game function :

const helper = new Helper();


    function Game() {
     useEffect(() => {
        setRandomMovie(Math.floor(Math.random() * (500 - 1) + 1));
        const { poster_path, error } = await helper.fetchMovieFunction(randomMovie)
        if (error)
          return console.log({error});
        setApiMovieResponse({poster_path})
      }, [page]);
   return ();
    }

我不明白为什么在这一行 const { poster_path, error } = await helper.fetchMovieFunction(randomMovie)我得到Unexpected reserved word 'await'.错误如我的函数未声明为异步函数

Answer 1

两个问题:

1. 您应该在异步函数中使用await

2. 但是传递给 useEffect 的回调不应该是异步的。因此，您可以创建一个 IIFE 并使其异步:

   useEffect(() => {
      (async () => {
        setRandomMovie(Math.floor(Math.random() * (500 - 1) + 1));
        const { poster_path, error } = await helper.fetchMovieFunction(randomMovie);
        if (error) return console.log({ error });
        setApiMovieResponse({ poster_path });
      })();
    }, [page]);
   

回调本身不应该是异步的，因为这会使回调返回一个 promise ，而 React 需要一个通常用于执行一些清理操作的非异步函数。