Question

在我的页面中，我需要一个页面来加载数据矩阵（表格），所以我发出3个请求来获取所有数据：

列数据
行数据
关系数据

拥有所有数据之后，我使用函数getRelation(columnIndex, rowIndex)来获取关系数据。

但是当在列之前加载行时，Angular会尝试执行我的getRelation方法来渲染，但是由于没有列数据，它会发生错误。

也许我可以在我的函数中添加if条件，但我只是想知道，有更好的方法来解决这种情况吗？

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

使用$q服务：

$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

如果你在colomns之后处理行计算会更好。尝试在javascript中使用promises。您可以使用库Q。

https://github.com/kriskowal/q

Answer 3

正如@Vanojx1所说，你应该使用$q服务来结合承诺。查看$q documentation以获取更多理解。

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

});

如何等待所有数据加载ajax完成渲染页面在Anagular？

3 个答案: