使用 async 和 await 在 Cordova 应用程序中按顺序运行 XMLHttpRequest

Question

我似乎不明白异步/等待如何在 XMLHttpRequest() 的上下文中工作。 我可以用回调编写 function 并让它按照我期望的顺序工作，但是当我使用以下命令时：

async function asyncLoadPartial(targetElementHandle,partial) {
        var xhr= new XMLHttpRequest();
        xhr.open('GET', partial, true);
        xhr.onreadystatechange = function(){
            if(this.readyState!==4){
                return false;
            }
            if(this.status!==200){
                return false;
            }
            //update the targetted element
            targetElementHandle.innerHTML= this.responseText;
            alert(1);
            return true;
        };
        xhr.send();
}

并在异步 function 内部调用：

async function other(){
    let dog = await asyncLoadPartial(el("mainContent"),partial);
    alert(2);
}

当我希望看到 1 和 2 时，我在警报“1”之前收到警报“2”。我阅读了如何从异步调用返回响应？ 并且可以使用 promise/then 来制作示例，但我仍然想学习 async/await。

我一直使用 XMLHttpRequest 的回调，直到最近我使用 fetch，但是在 Cordova 中，fetch API 似乎不支持提取本地文件，因为它给出了错误

获取 API 无法加载文件：///android_asset/www/path。 不支持 URL 方案“文件”。

我可以改变xhr.open('GET', partial, true); 到xhr.open('GET', partial, false); 并同步运行它，但不知道我在上面做错了什么让我很困扰。

我可以让 async/await 在其他环境中工作，但在这里不行。 为什么 function other() 在继续警报之前不等待？

Answer 1

这是正常行为，因为 XMLHttpRequest 是不可等待的，因此如果您注意到异步方法内部没有关键字await因此该方法将同步运行并且alert(2)将在alert(1)之前发生，因为 alert(1)只会在调用回调时发生。 因此，您在这种情况下使用 async 和 await 是多余的。 如果您不能使用 fetch api，请坚持使用旧的回调方法。