【问题标题】:How to make $q await multiple async tasks?如何让 $q 等待多个异步任务?
【发布时间】:2016-03-16 19:01:15
【问题描述】:

使用 Angular 的 $q 服务,我编写了一个异步获取数据的函数。下面的例子有点简化,但和我的生产代码类似:

DataService.fetchData(1)
.then(function (data1) {
    this.data1 = data;
    DataService.fetchData(2)
    .then(function (data2) {
        this.data2 = data2;
        DataService.fetchData(3)
        .then(function (data3) {
            this.data3 = data3;
            doSomething(this.data1, this.data2, this.data3);
        }, function () {
            alert("failure getting data 3");
        })
    }, function () {
        alert("failure getting data 2");
    });
}, function () {
    alert("failure getting data 1");
});

假设我需要进行三个异步函数调用来获取数据,如上。然后通过 Angular 视图显示数据。

但是,上面的代码有很大的缺陷。它很难阅读,函数调用嵌套很深。我想写一些类似的东西,使三个异步函数调用并执行一些函数来处理数据,只有在所有三个函数都完成后,如果发生错误,应该只有一个错误处理函数。

还应该注意的是,函数返回异步数据的顺序是未知的。

如何在 Angular 中做到这一点?

【问题讨论】:

  • 你想要$q.all。本质上,你将每一个 Promise 推入一个数组,然后在数组上调用 $q.all

标签: angularjs asynchronous promise angular-promise


【解决方案1】:

使用$q.all:

$q.all({
   data1: fetchData(1),
   data2: fetchData(2),
   data3: fetchData(3)
}).then(function(d){
     doSomething(d.data1, d.data2, d.data3);
});

【讨论】:

  • 这就是答案!我几乎无法想象一种更简洁的方式来做到这一点。错误处理呢?
  • @DanielAllenLangdon 您可以将.catch 处理程序添加到$q.all 的结果中,就像我添加了.then 一样,如果任何承诺被拒绝,它就会运行。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-03-18
  • 1970-01-01
  • 2014-09-06
  • 1970-01-01
  • 2013-02-10
相关资源
最近更新 更多