在接收到数据块时填充表

Question

我的代码有问题，我正在努力寻找为什么它不能按预期工作。

我有一个异步返回数据的 API。我希望前端在收到数据后立即添加该数据。我期望的是一个 API，它返回 200 个项目，然后 javascript 将这 200 个项目加载到一个表中，同时 API 不断返回另外 200 个项目，然后 javascript 将它们附加到表中，依此类推，直到没有更多剩余数据。

我正在使用 vanilla Javascript 5，基于原型的 MVC 模式。也许我没有得到简单的东西，或者它比我预期的要复杂得多。

resultView.js

//this function gets executed by some other code not relevant
ResultView.prototype.execute = function(serverName, databaseName, query){

    var response = resultController.getData(serverName, databaseName, query);

    console.log("response: ", response); //prints undefined

    response.done(function(data){ // Uncaught TypeError: Cannot read property 'done' of undefined
        console.log("response done: ", response); //doesn't even execute
        data.forEach(populateTable); //this code should populates the table
    });
}

resultController.js

ResultController.prototype.getData = function(serverName, databaseName, query){
    return resultModel.getData(serverName, databaseName, query);
};

resultModel.js

ResultModel.prototype.getData = function (serverName, databaseName, query) {

    var dataSend = {
      //the code that is being sent
    };
    var result = "";
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhr.onprogress = function () {
        result += xhr.responseText;
        if(xhr.readyState == 4){
            console.log("return: ", result); //shows the results properly each time they are received
            return result; //not sure about this return
        }   
      }
      xhr.send(JSON.stringify(dataSend));
    };  
}

我知道API正在接收数据，并且数据在前端正确返回，问题一定是我试图处理它。

目前，我在resultModel.js的console.log上得到的结果是预期的，问题似乎是从resultView.js调用它时，我猜函数调用response.done()时，但我无法修复它。

有人知道我该如何解决吗？ 提前致谢。

编辑：

部分感谢 Ionut，我设法让 resultView.js 返回更好的数据，但我仍然在 resultView.js 遇到问题，当我尝试使用 response.done(...) 时它告诉我它不能这样做done()的undefined，但是数据应该可以返回。这是我现在在 resultModel.js 中的代码，其余的保持不变。

resultModel.js

var xhr = new XMLHttpRequest();
console.log("Sending the request...");
xhr.open("POST", urlBase + "QueryResults", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4) {
    console.log("return: ", xhr.responseText); //data is logged properly
    return xhr.responseText; //it should be returned properly
  }
};
xhr.send(JSON.stringify(queryRequest));

Answer 1

您应该添加一个回调函数来管理完整的响应。 如果您想实现类似延迟加载的功能，您应该请求您的 API 向您发送少量项目的批次，您处理它们然后请求更多，直到您全部获得它们。

这是一个基本的 http 请求。

console.log('Sending the request ...');
var xhr = new XMLHttpRequest();
xhr.open('GET', "//ipinfo.io/json", true);
xhr.send();

xhr.onreadystatechange = processRequest;

function processRequest(e) {
  console.log('Getting the response ...');
  if (xhr.readyState == 4 && xhr.status == 200) {
    var response = JSON.parse(xhr.responseText);
    console.log('Your ip address is ' + response.ip);
  } else {
    console.log('Error state=' + xhr.readyState + ', status=' + xhr.status);
  }
}