如何等待所有数据加载ajax完成以在Anagular中呈现页面？

Question

In my page, I need a page to load a matrix of data (a table), so I make 3 requests to get all data:

• Columns data
• Rows data
• Relationship data

After has all datas, I using a function getRelation(columnIndex, rowIndex) to get relation data.

But when rows are loaded before then columns, Angular will try to execute my getRelation method to render, but it will occur an error because has not column data.

Maybe I can just put an if condition in my function, but I just want know, has some way better to resolve this situation?

this.relations = [];
this.columns = [];
this.rows = [];
this.getRalation = function getRalation(columnIndex, rowIndex) {
    var column= this.columns[columnIndex];
    var row= this.rows[rowIndex]

    var relation = $myService.getSomthing(this.relations, column.ID, row.ID);

    return relation;
}.bind(this);

$http.post(url, {}).then(function(res) {
    this.rows = res.data;
}.bind(this));

// same code for columns and relations

Answer 1

use $q service:

$q.all([/*promise from row request*/,/*promise from column request*/]).then(function(result){
     var rows = result[0];
     var columns = result[1];
     //parse row and cols, use getRalation here

});

Answer 2

It would be better If you handle rows calculation after colomns. Try to use promises in javascript. You can use the library Q.

https://github.com/kriskowal/q

Answer 3

As @Vanojx1 sayed, you should use $q service which is use to combine promises. Check the $q documentation for more understanding.

var rows = $http.post(url, {}).then(function(res) {
    return res.data;
})


var columns = $http.post(url, {}).then(function(res) {
    return res.data;
})

var relationship = $http.post(url, {}).then(function(res) {
    return res.data;
})


var results = [];

$q.all([rows, columns, relationship]).then(function(result){
    for (var i = 0; i < result.length; i++){
        results.push(result[i]);
    }
    result[0] //rows data
    result[1] //columns data
    result[2] //relationship data

});