异步 api 调用后在新选项卡中打开窗口答案

【问题标题】：Open window in new tab after async api call异步 api 调用后在新选项卡中打开窗口
【发布时间】：2021-12-23 22:44:12
【问题描述】：

我想要调用这个函数，然后在用户单击我的 VueJS 应用程序中的一个元素后在新选项卡中打开一个页面，类似于：

const someFunction = async () => {
   const value = await api.someCallToApi();
   window.open('https://example.com', '_blank').focus();
}

我不允许这样做，可能是由于等待导致 window.open 不是用户操作的直接结果（？）！由于我的应用程序的设置方式，api 调用的顺序和在新选项卡中打开窗口的顺序是相关的。

解决此类问题的可靠且现代的方法是什么？

【问题讨论】：

没有“坚实而现代的方式”。您需要对用户操作做出快速反应，否则可能会阻止弹出窗口，具体取决于浏览器和设置。实现这一点的方式取决于您的情况。

标签： javascript vue.js vuejs2 window.open

【解决方案1】：

在理想情况下，所有异步函数都会返回 Promise。但是可能仍然有使用await 的旧库。您可以创建一个包装 await 函数的 Promise，如下所示：

const delay = (ms) => new Promise(resolve => setTimeout(resolve.bind(null, ms/1000), ms));


delay(3*1000).then((sec) => alert(sec + " seconds passed"));

【讨论】：