等待响应并返回非 json

Question

我有一个解析html的函数，我想在它上面使用await，这样我就可以等到html解析加载完成。

这是我现在用来加载 Html 的内容：

function loadHTMLSource(urlSource){ 
    xhttp = new XMLHttpRequest(); 
    xhttp.open("GET", urlSource, false); 
    xhttp.send(); 
    return xhttp.response; 
}

然后我使用该函数并使用它执行此操作...

var page_html = loadHTMLSource(url);

parser = new DOMParser()
my_document = parser.parseFromString(page_html, "text/html");
search_str = await item[1];
search_attr_name = "data-style-name"; 

var all_styles = my_document.querySelectorAll("[data-style-name]");

我真的不知道为什么我在第 1 项之前放置了一个等待，或者它甚至没有做任何事情，但让我们继续前进..

item[1] 基本上是一个字符串值，它会在 html 中查找该字符串值..

除了似乎在我有时间查看页面之前就加载了 html 数据，甚至没有加载它..

所以我认为如果我将其更改为异步函数，它应该可以工作......

除了这不是 JSON 响应.. 那么我将如何使用 async 和 await 来做到这一点...？

感谢您的帮助谢谢..

Answer 1

有几种方法可以实现异步请求；带有回调、承诺和异步/等待。使用同步代码通常被解释为不好的做法。来自 mdn：

注意：主线程上的同步请求很容易破坏用户体验，应该避免；事实上，许多浏览器已经完全弃用了主线程上的同步 XHR 支持。 Worker 中允许同步请求。

我在这里使用回调作为示例，这意味着您应该为loadHTMLSource 提供回调以获取文本；

function loadHTMLSource(urlSource, callback){ 
   xhttp = new XMLHttpRequest();
   xhttp.open("GET", urlSource);
   xhttp.onreadystatechange = callback;
   xhttp.send();
   return;
}

然后在cb中获取响应：

loadHTMLSource(url, function(xhttp) {
    xhttp = xhttp.target; //note, we get event as parameter, target is xhr

    if(!xhttp.readyState === 4 && !xhttp.status === 200) {
        return;
    }

    console.log(xhttp.responseText);
    var page_html = xhttp.responseText;
    parser = new DOMParser()
    my_document = parser.parseFromString(page_html, "text/html");

    //this only sets search_str as item[1]
    search_str = await item[1];
    search_attr_name = "data-style-name"; 

    var all_styles = my_document.querySelectorAll("[data-style-name]");
});

还有很多更好的方法可以实现异步请求，比如promises，我强烈建议你看看这些。

要将 xhr 与 async/await 一起使用，您需要承诺 xhr 请求：

function loadHTMLSource(urlSource){
    return new Promise(function(resolve, reject) {
        xhttp = new XMLHttpRequest();
        xhttp.open("GET", urlSource);
        xhttp.onreadystatechange = function() {
            if(this.readyState === 4 && this.status === 200) {
                //optional checks
                if(xhttp.responseText) {
                    return resolve(xhttp.responseText);
                }
                return reject();
            }
        }
        xhttp.send();
    });
}

对于item[1] 和价值外观部分，您的问题需要进一步澄清