How to use async/await in Angular/Nodejs

Question

I have a Trip object:

{  "id": "1",  "country":"UK",  "city": "London"  }

I'm trying to create an edit form, where the form gets populated with the values from the trip object. I'm able to populate the countries dropdown (in ngOnInit()), and the selected country has a binding to trip.country. But I'm not able to fetch the cities of that country, because apparently the trip is still undefined when it is supposed to get trip.country to find the cities of that country. (I try to print the trip, and get undefined)

I tried using async with the getTrip() function, but I get the error that:

Error:(71, 21) TS1055:Type 'void' is not a valid async function return type in ES5/ES3 because it does not refer to a Promise-compatible constructor value.

I think the solution is some kind of async/await/promise strategy but I can't get hold of it.

export class TripEditorComponent implements OnInit {
  trip;
  countries;
  cities;

ngOnInit() {
    this.getTrip();
    this.countries = this.countryService.getCountries().subscribe(
        data => { this.countries = data;},
        err => console.error(err),
        () => console.log('done loading countries')
    );
    console.log("this trip: ", this.trip) //this is undefined

    this.cities = this.cityService.getCitiesByCountry(this.trip.country).subscribe(
        data => { this.cities = data; },
        err => console.error(err),
        () => console.log('done loading cities') );
     }

getTrip(): void {
    const id = this.route.snapshot.paramMap.get('id');
    if (id) {
      this.tripService.getTrip(id).subscribe(trip => { this.trip = trip;  });
    } else {
      this.trip = new Trip();
    }
  }
}

Any help will be appreciated.

FoxPro · Accepted Answer · 2018-01-04 08:10:25Z

2

Try something like this:

getTrip(): Promise{
    return new Promise((resolve, reject) => {
        const id = this.route.snapshot.paramMap.get('id');
            if (id) {
                this.tripService.getTrip(id).subscribe(
                trip => { 
                    this.trip = trip;
                    resolve();
               },
               error=>reject(error)
             );
            }
            else {
                this.trip = new Trip();
                resolve();
            }
    })
}

Usage:

this.getTrip().then(()=>{
    /*your callback here*/
})
.catch(error=>{
    /*catch exception here*/
})

If you want to use async/await, make sure that you in you compilerOptions (tsconfig.json) field "target" has "ES6" value

edited Jan 4, 2018 at 8:10

answered Jan 4, 2018 at 7:11

FoxPro

2,3274 gold badges18 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1340852 Over a year ago

@ДмитрийНикифоров Thank you. I have just noticed, however, that the json file for cities is very huge and it is not loading properly. So if I select countries with names starting with the letter >F, it is undefined because the entire file is not getting loaded. With countries having names starting with A-F, the code works fine. So I'm trying to reduce the number of cities associated with each country.

Collectives™ on Stack Overflow

How to use async/await in Angular/Nodejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related