繁体   English   中英

Angular JS Promise所有顺序

Angular JS Promise all sequential

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在尝试执行带有承诺的3个Web服务,并且我希望一旦它们全部执行完毕(如果可能的话),我将返回这3个服务的信息。 我有这个。

这是我的服务

getServices(url: string): Promise < any > {
  return this.http.get(CoordinadoresService.BASEURL + url)
    .toPromise()
    .then(response => {
      return response.json();
    })
    .catch(err => err);
}

这是我的组成部分

getOffices() {
  this.oficinas["coordinadores"] = [];
  let data = this.util.getLocalStorage("coordinadores");
  let promises = [];
  if (data != undefined) {
    for (let i = 0; i < Object.keys(data.coordinadores).length; i++) {
      let url = `getOficinas/${data.coordinadores[Object.keys(data.coordinadores)[i]].ip}/${Object.keys(data.coordinadores)[i]}`;
      promises.push(this.services.getServices(url).then(response => {
          response["coordinador"] = response.coordinador;
          this.oficinas["coordinadores"].push(response)
        },
        err => err));
    }

    Promise.all(promises).then(data => {
      console.log('Both promises have resolved', data);
    });
  }
}

但是在这里,他给了我不确定的回馈。 为什么?

Promise.all(promises).then(data => {
  console.log('Both promises have resolved', data);
});

谢谢。

2 个回复

您的实现存在一些问题。

  1. 首先,如果您使用HttpClient ,则不必进行map ,然后在响应上调用json
  2. 您没有从this.services.getServices(url)then返回。 因此, Promise.all没有任何响应

以下是修复程序。


import { HttpClient } from '@angular/common/http';
...
constructor(private http: HttpClient) {}
....
getServices(url: string): Promise < any > {
  return this.http.get(CoordinadoresService.BASEURL + url)
    .toPromise();
}

getOffices() {
  this.oficinas["coordinadores"] = [];
  let data = this.util.getLocalStorage("coordinadores");
  let promises = [];

  if (data) {

    for (let i = 0; i < Object.keys(data.coordinadores).length; i++) {
      let url = `getOficinas/${data.coordinadores[Object.keys(data.coordinadores)[i]].ip}/${Object.keys(data.coordinadores)[i]}`;
      promises.push(this.getDataFromAPI(url));
    }

    Promise.all(promises).then(data => {
      console.log('Both promises have resolved', data);
    });
  }
}

private getDataFromAPI(url) {
  return this.services.getServices(url)
    .then(
      response => {
        response["coordinador"] = response.coordinador;
        this.oficinas["coordinadores"].push(response)
        return response;
      },
      err => err
    );
}

您在console.log中得到未定义的原因是此代码

  promises.push(this.services.getServices(url)
 .then(response => {
      response["coordinador"] = response.coordinador;
      this.oficinas["coordinadores"].push(response);
      // nothing returned
  }, err => err));

由于没有返回任何内容(在此处注明),推送到Promise中的Promise将解析为undefined

只需添加一个return response

注意: response["coordinador"] = response.coordinador; 是多余的,就像说a = a a-所以我不会在下面的代码中重复

也是this.oficinas["coordinadores"]this.oficinas.coordinadores因此将使用后者

  promises.push(this.services.getServices(url)
 .then(response => {
      this.oficinas.coordinadores.push(response);
      // something returned
      return response;
  }, err => err));

至于您问题的另一部分...您想“顺序”执行此操作

如果您可以使用async / await这将使更改非常简单

async getOffices() { // add async keyword
    this.oficinas.coordinadores. = [];
    let data = this.util.getLocalStorage("coordinadores");
    let results = []; // no longer dealing directly with promises, so lets rename this
    if (data != undefined) {
        for (let i = 0; i < Object.keys(data.coordinadores).length; i++) {
            let url = `getOficinas/${data.coordinadores[Object.keys(data.coordinadores)[i]].ip}/${Object.keys(data.coordinadores)[i]}`;
            // await the promise
            let result = await this.services.getServices(url).then(response => {
                this.oficinas.coordinadores.push(response);
                return response;
            }, err => err);
            // push the result
            results.push(result);
        }
        // output the result
        console.log('Both promises have resolved', results);
    }
}

并且-因为

let url = `getOficinas/${data.coordinadores[Object.keys(data.coordinadores)[i]].ip}/${Object.keys(data.coordinadores)[i]}`;

看起来很乱,让我建议另一种选择

async getOffices() {
    this.oficinas.coordinadores. = [];
    let data = this.util.getLocalStorage("coordinadores");
    let results = [];
    if (data != undefined) {
        for (let [key, {ip}] of Object.entries(data.coordinadores)) {
            const url = `getOficinas/${ip}/${key}`;
            let result = await this.services.getServices(url).then(response => {
                this.oficinas.coordinadores.push(response);
                return response;
            }, err => err);
            results.push(result);
        }
        console.log('Both promises have resolved', results);
    }
}
2 顺序 for 循环 - Await Promise all

我只是试图让代码的最后一行仅在所有 updateInkLevel 函数完成执行后运行。 updateInkLevel 是一个异步函数,返回一个承诺。 我正在考虑使用 Promise.all,但这会并行运行每个迭代,这不是我想要的。 在这里,我一次一次地按顺序触发每个迭代,睡眠延迟间隔很小。 ...

3 Promise.all 的顺序执行

嗨,我需要一个接一个地执行承诺,我如何使用承诺来实现这一点。所有任何帮助都会很棒。 下面是我目前使用的代码示例,但它是并行执行的,因此搜索将无法正常工作 我在谷歌上查了一下,看到reduce会有所帮助我很感激关于如何将其转换为reduce或您建议的任何方法的任何帮助(.map中的并发不起作用) ...

4 Vue JS Promise Sequential与并行

我在VueJS中有工作代码,但是需要一定的块才能顺序运行: 目前看来,这是并行运行的-因此,在initialTest()中,我将记录插入数据库,但是并行获取了我的随机顺序,而不是testRuns的顺序(我想保留该顺序)。 由于并行性,我可以观察到initialTest()中随机进行 ...

7 再次承诺的承诺(Angular JS)

更新了HTTP和基于请求的初始代码/请查看帖子底部: 我最近在AngularJS学习曲线上发布了几个问题,因此SO社区很棒。 过去我曾经是传统的C程序员,最近开始编写自己的ionic / Angular JS应用程序。 在将自定义函数转换为Promise时,我在传统异步调用的Promi ...

9 顺序承诺

所以我试图在不使用异步的情况下按顺序执行我的承诺 下面是我的代码 现在说 promises 数组有 2 个函数,它们分别在 5 秒和 10 秒内执行,上面的代码在 10 秒内给出答案,但如果真正的序列执行应该在 15 秒内给出。 请建议。 ...

10 Angular JS承诺评估

更新:我挖得更深一点,发现在1.2.0之后,角度弃用了自愿展开的承诺 。 我理解Angular JS将评估作为promise的范围变量,然后在履行promise时更新控制器的视图。 我的问题是: http://jsfiddle.net/dhruvkaran/Lv5vF/4/ ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM