javascript - 使用 async 和 wait 在 Cordova 应用程序中顺序运行 XMLHttpRequest

Question

我似乎不明白 async/await 在 XMLHttpRequest() 的上下文中如何工作。我可以使用回调编写函数并让它按我期望的顺序工作，但是当我使用以下内容时:

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();
}

并在异步函数内调用:

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

当我期望看到 1 然后是 2 时，我在警报“1”之前收到警报“2”。我读了 How do I return the response from an asynchronous call?并且可以使用 Promise/then 来制作示例，但我仍然想学习 async/await。

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

Fetch API cannot load file:///android_asset/www/path. URL scheme "file" is not supported.

我可以将 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 和 wait 是多余的。如果您无法使用 fetch api，请坚持使用旧的回调方法。