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

有两种方法可以实现异步请求；带有回调，promise和async / await。使用同步代码通常被解释为不良做法。来自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]和有价值的部分，您的问题需要进一步澄清

等待响应并返回非json

1 个答案: