Chrome：在微任务执行期间调用“alert()”已被弃用并将被删除答案

【问题标题】：Chrome: Invoking 'alert()' during microtask execution is deprecated and will be removedChrome：在微任务执行期间调用“alert()”已被弃用并将被删除
【发布时间】：2017-01-01 13:07:52
【问题描述】：

在处理我的网络应用程序时，特别是文件上传，Chrome 在我发出警报后显示警告：

不推荐在微任务执行期间调用“alert()”，并将在 2016 年 9 月左右的 M53 中删除。有关详细信息，请参阅 https://www.chromestatus.com/features/5647113010544640。

但是我认为在我的情况下调用是合理的，并且有点担心一旦 M53 发布我的代码将无法工作。请注意，我不会将警报发送到生产环境，但对于测试它是非常有价值的。

情况：

我正在使用 react 在 typescript 中开发我的应用程序。我正在使用axios 来执行http 请求。基本上 http-post 看起来像这样：

axios.post("/upload/", data)
    .then((response: any) => {
        callback(undefined);
    })
    .catch((error: any) => {
        callback(error);
    });

然后在调用方法中，如果有错误，我会弹出一个警报，这样我就可以确定测试人员/开发人员会收到通知。有点像这样：

this.service.uploadFile((error: any) => {
    if (error) {
        console.log(error);
        alert("An error occured");
        return;
    }

    this.onUploadCompleted()
});

这是 chrome 显示警告的时候。

首先我想知道警告是否合理，因为警报会在请求完成并返回错误之前显示。所以我很确定它不会阻止任何东西。

如果是合理的，我可以做些什么来显示警报？

【问题讨论】：

console.log() 还不够吗？

标签： javascript ajax google-chrome axios

【解决方案1】：

是的，警告是有道理的：你在一个微任务中调用alert，在这种情况下是一个承诺完成。（见Difference between microtask and macrotask within an event loop context。）

alert、prompt 和 confirm 是很久以前的遗物，它们有一个问题：它们完全中断了 JavaScript 的正常工作，并且可以说通过完全暂停来违反其运行到完成的语义执行，就在作业队列中的作业（或事件循环中的任务；JavaScript 和 HTML5 规范在术语上有所不同）的中间，并以阻塞模式的形式执行 UI。这不符合基于事件的一般交互模式（显示消息，关闭时获取事件）。

您可以通过在宏任务中执行alert 来解决它：

this.service.uploadFile((error: any) => {
    if (error) {
        setTimeout(() => {
            console.log(error);
            alert("An error occured");
        }, 0);
        return;
    }

    this.onUploadCompleted()
});

...但真正的解决方案是完全停止使用alert、prompt 和confirm。

这是一个有趣的微任务和宏任务示例：promise 完成是微任务，而计时器回调是宏任务。脚本的初始运行也是一个宏任务，DOM 事件回调也是如此。由宏任务排队的所有微任务在运行下一个宏任务之前运行；例如，他们插队。所以有了这个：

// First, we set a timer callback for 0ms
setTimeout(() => {
  console.log("timer fired");
}, 0);

// Now we get a promise that's *already* resolved and hook a callback
Promise.resolve().then(() => {
  console.log("promise resolved");
});

// Now show a message demonstrating we got here before the promise resolution callback
console.log("got to the end");

...我们看到了

走到了尽头承诺已解决计时器触发

...而不是

走到了尽头计时器触发承诺已解决

....如果所有任务都是平等的，我们会得到的。

【讨论】：