如何在前一个函数完成之前进行语句？

Question

我遇到了一个问题， window.open被调用得太快，我的其他函数没有完成并在我的 onclick 函数中及时发布。

我尝试在trackData()上设置超时，但它只是偶尔起作用，我不想设置更长的超时。

点击

   {() => {
       trackData();
       window.open("https:google.com", "_self");
    })

有任何想法吗？

编辑：以下在本地工作，但在生产时不跟踪。 如果"_self"被替换为"_blank" （它不能），则跟踪每次都有效

  let postData = async(value) => {
       await tracker({
            action: value,
        })
    }

跟踪器只是用动作制作一个 axios 帖子

   <div
       className="exampleBTN"
       onClick={() =>  {
       postData("example").then(                         
       window.open("https://google.com", 
       "_self")
       )}
    }
    >
   </div>

在本地，我可以看到数据进入数据库。

但是，在线它不起作用。 仅当以下任一条件为真时才有效：

• 在 onClick 中没有 window.open
• 没有“_self”而是“_blank”，所以它会在新标签页中打开

我认为我的异步是错误的，所以我也尝试了以下操作：

 onClick={async () =>  {
 await postData("example").then(                            
 window.open("google.com", "_self"))
 }}

Answer 1

您可以在此处使用基于承诺的方法。使用aysnc并await 。

async function trackData(){
 ..... 
   let data = awiat your code 
.....
}

带有承诺的函数调用

trackData().then(res=>{
  if(res ==="Success){
 window.open("https:google.com", "_self")
}
})

Answer 2

您可以使用 .then 或 async/await 在操作导致Promise时执行此操作。 Axios 请求返回 Promise。

initiateAsynchronousAction()
  .then(result => console.log(result))

.then函数中的回调只有在异步函数执行的操作完成承诺时才会执行。

小说明：请注意，在.then()您必须传递回调函数，而不仅仅是立即调用您想要执行的操作，即使您不打算使用结果值。 所以它将是.then(result=> console.log('Inside callback!'))

而不是.then(console.log('Inside callback!'))

Async-await 是另一种写法，它只是语法糖，这只是一种更简单的写法：

const foo = async () => {
  const result = await initiateAsynchronousAction()
  console.log(result)
}

一旦 Promise 被解析，变量result才会被赋予值。 也就是说，将等待分配值。

如果 Axios 承诺未实现，您可以在第一种情况下链接.catch或将任务封装在 try-catch 块中以捕获错误。