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()的{{1}}，但应该能够返回数据。这是我在resultModel.js中的代码，其余的保持不变。

resultModel.js

undefined

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);
  }
}

收到数据块时填充表格

1 个答案: