javascript - Angular Promise.all在超时事件中不起作用

我在使用Angular 6时遇到以下问题。我想做的是等待一些诺言得到解决，然后再做其他事情。这是我所拥有的并且正在运行：

AppService.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AppService {

  p1: Promise<any>;
  p2: Promise<any>;

  constructor() {
    this.getPromise1();
    this.getPromise2();
  }

  getPromise1() {
    this.p1 = new Promise((resolve, reject) => {
      resolve(true);
    });
  }

  getPromise2() {
    this.p2 = new Promise((resolve, reject) => {
      setTimeout(() => resolve(true), 5000);
    });
  }
}

AppComponent.ts

import { Component, AfterViewInit } from '@angular/core';
import { AppService } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  implements AfterViewInit {

  constructor(private appSrvc: AppService) { }

  ngAfterViewInit(){
    Promise.all([this.appSrvc.p1, this.appSrvc.p2])
      .then(values => {
          console.log(values);
          //If all promises resolved then execute something here
      })
      .catch(error => {
          console.log(error.message)
      });
  }
}

现在，当我编辑以下内容时，它不起作用：

AppService.ts

 constructor() {
    this.initialize();
  }

  initialize(){
    setTimeout(() => {
      this.getPromise1();
      this.getPromise2();
    }, 1000);
  }
  ...

当我从另一个方法中使用超时事件调用相同的promise时，它们将不起作用，我也无法理解为什么。谁能帮我这个。

提前致谢

最佳答案

发生的是：


AppService构造函数在注入模块时被调用
注入AppComponent之后几毫秒
大约100毫秒后，调用AppComponent=>ngAfterViewInit()


设置超时时，这两个承诺的初始化被推迟1000ms。此时，您的AppComponent=>ngAfterViewInit()已经完成，并且这两个将要承诺的值实际上是undefined。要解决此问题，您需要同步这两个事件，因此可以从AppService.initialize()调用AppComponent来解决问题，但还必须使其异步。

这是一个示例，您可以如何同步它：

getPromise1() {
    if(!this.p1) {
        return this.p1 = new Promise((resolve, reject) => {
            resolve(true);
        });
    }
    return this.p1;
}
getPromise2() {
    if(!this.p2) {
        return this.p2 = new Promise((resolve, reject) => {
          setTimeout(() => resolve(true), 5000);
        });
    }
    return this.p2;
}

然后在呼叫站点：

ngAfterViewInit(){
    Promise.all([this.appSrvc.getPromise1(), this.appSrvc.getPromise2()])
        .then(values => {
                console.log(values);
                //If all promises resolved then execute something here
        })
        .catch(error => {
                console.log(error.message)
        });
}

关于javascript - Angular Promise.all在超时事件中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53476482/