如何等到获取完成[重复]

Question

我对 javascript 很陌生，我遇到了这个问题。返回部分不会等待我的状态获取。我怎样才能做到这一点？我也尝试添加一些超时，但也没有用。

const LoggedRoute = ({ component: Component, ...rest}) => {
    const token = cookie.get('token');



    fetch(`${constants.urls.put}/auth/user`, {
        method: 'GET',
        headers:{'Authorization': 'Token ' + token}
    })
    .then(
        data => {
            data.json();
            status = data.statusText;
        }
        
    )


    return (
        <Route
        {...rest}
        render={props =>
        ((status != "OK")) ? (
            <Component {...props} />
        ) : (
            <Redirect
            to={{
                pathname: "/",
                state: { from: props.location}
            }}
            /> 
        )
}
/>
);

}
export default LoggedRoute

Answer 1

处理这种简单情况的简单方法是在 fetch 运行时返回 <Loader /> 或类似的东西：

if(!fetchFinished) return <Loader />;

return (
// ...your code
);

您还应该将您的 fetch 放入 useEffect 挂钩中，这样您就可以使用 async...await 模式等待您的 fetch 结束：

useEffect(async () => {
  const data = await fetch(...);
  const json = await data.json();
  // etc.

});

return (
  //... your code
);

与您的代码混合的第一个解决方案如下所示：

const LoggedRoute = ({ component: Component, ...rest }) => {
  const token = cookie.get('token');
  // Set a boolean to update when your query is done
  const [isFetchFinished, setIsFetchFinished] = useState(false);

  useEffect(() => {
    fetch(`${constants.urls.put}/auth/user`, {
      method: 'GET',
      headers: { Authorization: 'Token ' + token },
    }).then((data) => {
      data.json();
      status = data.statusText;
      // when you're finished with your data, set your boolean to true
      setIsFetchFinished(true);
    }, []); // Don't forget the empty deps array to make it act like 'componentDidMount'
  });

  if(!isFetchFinished) return <Loader />;

  return (
    <Route
      {...rest}
      render={(props) =>
        status != 'OK' ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: '/',
              state: { from: props.location },
            }}
          />
        )
      }
    />
  );
};
export default LoggedRoute;