reactjs - 如何按顺序执行异步等待操作？

Question

我想将令牌保存在 cookie 中并运行导航（“/”）。在“/”中，实现了token值的实现。因此，我想在token值进来后使用setCookie来运行navigation。我认为我们应该使用async await，所以我们尝试了很多，但都失败了。（我使用的是react-cookie库。）

  const [cookies, setCookie, removeCookie] = useCookies("token");
axios
      .post(`${process.env.REACT_APP_API}/normal_login/`, formData)
      .then((response) => {
        if (response.data) {
   
          console.log(response.data.account_token);
          setCookie("token", response.data.account_token, {
            path: "/",
          });
          console.log("cookies", cookies);
          // navigate("/");
        }
      })
      .catch((err) => {
        console.log("==>", err);
 
      });

Error: Request failed with status code 401
    at createError (createError.js:16:1)
    at settle (settle.js:17:1)
    at XMLHttpRequest.onloadend (xhr.js:66:1)

Answer 1

async method(){
   const [cookies, setCookie, removeCookie] = useCookies("token");
 try{
    var response= await axios.post(`${process.env.REACT_APP_API}/normal_login/`, formData);
    if (response.data) {
       console.log(response.data.account_token);
       setCookie("token", response.data.account_token, {
       path: "/",
       });
       console.log("cookies", cookies);
          // navigate("/");
       }
  }
 catch(e){
   console.log(e);
 }
}

Answer 2

您可以使用useEffectwithcookie作为依赖项在 cookie 更改后触发某些内容。就像是：

useEffect(() => navigate('/'), [cookies]);

将依赖项添加到 useEffect 使其仅在cookie依赖项中的变量（此处）被修改时才起作用。