promise.all not access in rejection function

问题:

i have one service that get data , and i called it 5 times with different parametes to get different data. I called a function to execute in success case : it work fine. but in case of failure one from the 5 calls i need to do something else what's not happen : it always enter in success function. I'm using ionic 4 angular 2 this is the service i have :

 public getdataLookUps(type, lcid): Promise<string[]> {
return new Promise((resolve, reject) => {
  if (this.data[type + lcid]) {
    resolve(this.data[type + lcid]);
    return;
  }
  this.authService.getToken().then(
    (accessToken) => {
      let headers = new Headers({'Authorization': 'bearer ' + accessToken});
      let url = 'error url to test failure case';
      this.http.get(url, {headers: headers})
        .map(res => res.json())
        .toPromise()
        .then(
          (res) => {
            this.data[type + lcid] = res;
            resolve(res);
          },
          (error) => {
            reject(error);
          }
        );
    }
  );
});

}

then I wrapper the function that calls the service like this: ( repeated 5 times with different params):

public getAreas() {
    return this.lookupsService.getdataLookUps('Region', this.lcid).then(
      (res) => {
        this.areas = res;
      },
      () => {
        //todo
return Promise.reject('rejection error');
      }
    );
  }

then I call the 5 functions :

  ngOnInit() {
    this.getCaseCategories();
    this.getAreas();
    this.getWeather();
    this.getMifonProjects();
    this.getUserInfo();
}

and I do promise.all() here :

ngAfterViewInit(){
 Promise.all(
      [
        this.getCaseCategories(),
        this.getAreas(),
        this.getWeather(),
        this.getMifonProjects(),
        this.getUserInfo(),
      ]
    ).then(
      () => {
        this.loadMap();
      },
      () => {
        this.showErrorMessage = true;
      }
    );
}

回答1:

This code has two callbacks for then, a success handler, and an error handler. If the code is as you have shown the error handler returns a success result so your Promise.all() will always succeed:

public getAreas() {
    return this.lookupsService.getdataLookUps('Region', this.lcid).then(
      (res) => {
        this.areas = res;
      },
      () => {
        //todo
      }
    );
  }

Don't add an error handler unless you are really able to handle the error here. Instead just let the error propagate out to the next handler:

public getAreas() {
    return this.lookupsService.getdataLookUps('Region', this.lcid)
    .then(res => this.areas = res);
  }

Now your Promise.all will give you an error when the data lookup fails.

Also stop nesting your promise handlers:

public getdataLookUps(type, lcid): Promise<string[]> {
    if (this.data[type + lcid]) return Promise.resolve(this.data[type + lcid]);
    return this.authService.getToken().then(
      (accessToken) => {
        let headers = new Headers({'Authorization': 'bearer ' + accessToken});
        let url = 'error url to test failure case';
        return this.http.get(url, {headers: headers})
          .map(res => res.json())
          .toPromise();
     })
     .then((res) => this.data[type + lcid] = res);
}

Once you have a Promise just return the Promise there is no need to create a new Promise. And if your promise success handler creates another promise return that to avoid nesting. Your error handler did nothing but propagate the error, so when you don't have the nested promise you don't need that either, just let the error propagate naturally.

回答2:

I solved it by removing the calls of the functions in ngOnInit(); and keep everything same as my example above (not change anything in the getDataLookUps service)