Javascript XMLHttpRequest的返回结果

我正在尝试返回XMLHTTPRequest的结果：

<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">Click me for Google CDN jQuery!</a> 

<script>
    const url = {
        httpRequest: function(callback) {
            var xhr = new XMLHttpRequest();
            xhr.addEventListener("load", callback);
            xhr.open("GET", document.querySelector("a").href); // Using querySelector to simulate how my real program works - I don't want to hardcode anything mainly because this should be dynamic.
            xhr.send("");
        },
        compileData: function(data) {
            var response = data.target.responseText.substring(4, 17) 
            // I can't figure out how to take this response and 'return' it.
        },
        getContent: function() {
            url.httpRequest(url.compileData)
        }
    }

     var content = url.getContent() // I want 'content' to be equal to "jQuery v3.3.1"
</script>

常量url={
httpRequest:函数（回调）{
var xhr=new XMLHttpRequest（）；
xhr.addEventListener（“加载”，回调）；
xhr.open（“GET”，document.querySelector（“a”）.href）；//使用querySelector来模拟实际程序的工作方式-我不想硬编码任何东西，主要是因为这应该是动态的。
xhr.send（“”）；
},
compileData:函数（数据）{
var response=data.target.responseText.substring（4,17）
//我不知道如何接受这个回答并“返回”它。
},
getContent:function（）{
httpRequest（url.compileData）
}
}
var content=url.getContent（）//我希望“content”等于“jQuery v3.3.1”

但是，我不知道如何“返回”响应

是的，我知道还有其他类似的问题，即：但是，我是JavaScript新手，不知道如何将他们所说的整合到我的案例中。

你需要，而且！你应该从函数中返回一个

function httpRequest() {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.onload = (response) => {
            resolve(response); // You should check the response and maybe preprocess it 
                               //   so that not everything is passed further
        }
        xhr.open("GET", document.querySelector("a").href);
        xhr.send("");
    });
}

然后您可以使用

然后

和

捕获

httpRequest().then((data) => {
    // Yay! Got response from the server!
}).catch((error) => {
    // Yay! More errors!
});

---

应用“”中给出的指南的几个选项

如果您想继续使用回调，那么就需要添加另一个回调。您希望的结果是允许您的入口点接受自己的入口点：

url.getContent(function (content) {
  // proceed with `content` here
});

因此，

getContent

需要预期参数：

getContent: function(callback) {
  // ...
}

但是，它还需要调用

回调

，这可以通过另一个中间函数来实现，因此它可以将

回调

与

编译数据

结合起来：

getContent: function(callback) {
  url.httpRequest(function (data) {
    callback(url.compileData(data));
  });
}

getContent: function () {
  return url.httpRequest().then(url.compileData);
}

您还可以在整个

url

对象中使用承诺

从

httpRequest

开始，您可以利用并返回一个定制的承诺对象–一个：

在此情况下，可用于将自定义承诺转换为标准的

承诺

然后，可以修改

getContent

以与承诺交互，并使用

compileData

修改响应：

getContent: function(callback) {
  url.httpRequest(function (data) {
    callback(url.compileData(data));
  });
}

getContent: function () {
  return url.httpRequest().then(url.compileData);
}

并且，调用方可以使用以下命令添加自己的处理程序：

还有一个简短的旁白。。。在支持浏览器的情况下，您可以使用代替

jQuery.ajax（）

，它已经返回了一个标准的

Promise

，但首先会给您一个对象，而不是原始的

数据

httpRequest: function () {
  return fetch(document.querySelector("a").href)
    .then(response => response.text())
}

---

根据3JS标准，有三种不同的方法，即es5、es6和es7，但这里使用的是xhr，因此它是一种旧标准

因此，您应该在这里使用xhr对象的xhr.onload方法来返回响应。简单地做：

xhr.onload=回调
在xhr.open和xhr.send之间插入此代码。
对不起，我必须对您诚实。你不需要这么回答，你需要一门javascript基础课程。看看承诺，或者你可以将回调传递给compiledata回调，在需要的地方检索到你的函数中