在 Cordova 应用程序中使用异步和等待顺序运行 XMLHttpRequest答案

【问题标题】：Running XMLHttpRequest sequentially in Cordova app with async and await在 Cordova 应用程序中使用异步和等待顺序运行 XMLHttpRequest
【发布时间】：2020-02-02 00:46:00
【问题描述】：

我似乎不明白异步/等待如何在 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 来制作示例，但我仍然想学习异步/等待。

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

Fetch API 无法加载 file:///android_asset/www/path。网址方案不支持“文件”。

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

我可以让 async/await 在其他上下文中工作，但在这里不行。为什么函数 other() 不等待，然后再转到警报？

【问题讨论】：

标签： javascript async-await xmlhttprequest

【解决方案1】：

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

【讨论】：