异步/等待不适用于 alert() - javascript答案

【问题标题】：Async/Await does not work with alert() - javascript异步/等待不适用于 alert() - javascript
【发布时间】：2020-09-30 17:48:02
【问题描述】：

我希望先执行带有 await 关键字的两个函数，然后执行 alert() 和 location.reload。

 async function CompleteUpload(){
            await LoadValues();
            await UploaderMethod();
            alert("Product Added Successfully!");
            location.reload();
        }

警报会在 2 个 await 函数调用之前弹出，并且页面会在这些方法执行之前重新加载。

async function LoadValues(){
        prName = document.getElementById('NAMEbox').value;
        proc = document.getElementById('PROCbox').value;
    }

async function UploaderMethod(){
        var uploadTask = firebase.storage().ref("Laptops/Img" + id+".png").put(files[0]);
            
        uploadTask.on('state_changed', function(snapshot){
          }, .... //firebase upload data function

如果我不放 alert() 并在最后重新加载，则上传 CompleteUpload() 可以完美运行。

已更新**（在有人回答有关返回承诺后）

在上传任务结束时我写了这个：

        return new Promise(function(resolve, reject) {
        resolve("yeah");
    }

将完整上传更改为：

function CompleteUpload(){
            LoadValues();
            UploaderMethod().then(Reeeload());
        }

function Reeeload(){
            alert("Product Added Successfully!");
            location.reload();
        }

【问题讨论】：

我认为问题在于，UploaderMethod 返回得太早了。您可能希望返回一个 Promise 并在上传完成时调用 resolve 方法。从我看到的部分来看，我猜它会在进行上传调用后返回，而不是等待上传完成
在我点击警报方法上的“确定”之前上传没有开始，虽然它重新加载了，因为我已经把它放在那里了。

标签： javascript asynchronous async-await

【解决方案1】：

这与alert 完全无关。

您的UploaderMethod 被定义为async，因此它总是返回一个promise，但该promise 在uploadTask 完成之前解析（因此它会立即继续到下一条语句（alert 后跟reload） )。

你应该：

从中删除 async 关键字（因为它不是 awaiting 任何承诺）
返回使用 Promise 构造函数创建的承诺
在 state_changed 事件处理程序中解决该承诺（当一切都解决后）。

见How do I convert an existing callback API to promises?。

旁白：LoadValues 除了完全同步的 DOM 访问之外什么都不做。它不应该被标记为 async 并且你不应该 await 结果。

【讨论】：

我更新了我的问题，要么我返回错误的承诺，要么它不起作用。
完全错误。要么没有从UploaderMethod 函数返回承诺，要么resolve 不在state_changed 事件处理程序中。再看看我提到的另一个问题。
看看这个codepen.io/TACV/pen/Rwamzaz?editors=0010，它是我完整的 UploaderMethod。我在完成 data.set() 方法后写了承诺，它在 uploadtask 函数中。
你的promise与state_changed事件无关。查看我引用的示例问题。
好的，我已尽力了解 promise 的工作原理codepen.io/TACV/pen/Rwamzaz?editors=0010，但现在我遇到了两个问题，(1) 和之前一样，警报仍然首先触发 (2) 承诺会尽快执行随着页面加载。

【解决方案2】：

是不是特别是 alert() 不适用于 async/await？如果您将alert() 和location.reload() 行替换为console.log 之类的内容，看看是否也先执行。

可能是您的LoadValues() 和UploaderMethod() 导致了问题。

【讨论】：

警报和位置重新加载都发生，在这两种方法之前，当我删除警报并重新加载时它们运行得很好，它们怎么会导致问题。
警报和位置重新加载应该在异步函数中正常工作，所以我怀疑问题出在您的其他两个函数上 - 可能是 UploaderMethod()
alert 会中断页面上的代码执行，重新加载也会取消代码执行。因此，如果您的 UploaderMethod 尚未完成，它将被取消。要等待方法完成，请参阅 Quentin 的回答
是的，我同意，只是意味着它们都应该在其他两个函数之后执行。昆汀的回答应该能得到你想要的。

【解决方案3】：

await 在顶级代码中不起作用

所以 intead of function(){ } 使用 this ()=>{} 它会起作用我从这个网站制作了截图。我也遇到过同样的问题 (https://javascript.info/async-await)enter image description here

【讨论】：