如何等到获取完成

Question

我是 javascript 的新手，遇到了这个问题。 return 部分不等待获取我的状态。我怎样才能做到这一点？我还尝试添加一些超时，但效果不佳。

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

处理这种简单情况的简单方法是 return 一个 <Loader /> 或类似的东西，而你的提取是运行 :

if(!fetchFinished) return <Loader />;

return (
// ...your code
);

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

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;

如何等到获取完成

how to wait untill fetch finishes

javascript

frontend

authorization

fetch

reactjs