时间戳

首页 > 解决方案 > 声明一个异步函数

javascript - 声明一个异步函数

问题描述

我是新来的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'.错误，就像我的函数没有声明为异步函数一样

标签： javascriptreactjs

解决方案

两个问题：

  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 需要一个非异步函数，该函数通常用于进行一些清理。

推荐阅读