データチャンクが受信されたときにテーブルをポピュレートする

Question

私のコードに問題があり、なぜ期待通りに動作しないのか分かりません。

データを非同期に返すAPIがあります。フロントエンド側では、受信したデータをすぐに追加したいと思っています。私が期待しているのは、200個のアイテムを返すAPIと、200個のアイテムをテーブルにロードするためのjavascriptです。一方、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()を呼び出すと思いますが、修理する。

どのように解決策に近づけることができますか？ ありがとうございます。

EDIT：はIonutに

一部のおかげで、私はresultView.jsが良く件のデータを返すように管理してきましたが、私はresponse.done(...)にそれを使用しようとすると、私はまだ、resultView.jsで問題を抱えています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); 
 
    } 
 
}