The right way to use toPromise in angular 6

Question

I'm trying to retrieve data from multiple http requests and i decided to avoid nested subscribe(). I just want to write code in async await style.

const diagnostics = this.http.get(url, {params: params}).toPromise()
console.log(diagnostics);

But i get this:

// ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array(0)}

Which i don't know how to handle to extract data.

Is there a way to avoid callbacks like ?

.then(res => {}).catch()

Solution 1

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Sounds like you may want to look at this, you can collate an array of promises and can essentially "await" on all of them to complete before acting on the value.

myPromiseArray.push(this.http.get(url, {params: params}).toPromise()) Promise.all(myPromiseArray).then(alltheValuesInAnArray => {})

Solution 2

As you noticed, the result of .toPromise method is Promise object. In order to use async/await style, you need at first wrap your code with async function, by prepending async keyword to function, and then with await keyword tell your code to wait for async operation. In your case it's http request.

async function run(){
    try{
        const diagnostics = await (this.http.get(url, {params: params}).toPromise());
        // wait for asynchronous request
        console.log(diagnostics);
    } catch(err){
        // request failed
        console.error(err);
    }
}
run();

Comments

[Amit Chigadani]

Why you want to return Promise and why not Observable? Any specific reason?

[trincot]

@AmitChigadani, one could ask why Observable when Promise will do the job fine.

[Amit Chigadani]

@trincot Because Observable is more rich than Promise and could do more jobs. And By default all http requests return an Observable.. So why should we convert it to Promise and then return.

[trincot]

True, but promises can benefit from the nice async/await syntax.

[madjaoue]

@sandum Are you looking for a a pure promise style answer ?

[trincot]

Sandum, please show how you deal with multiple requests: do you need to wait for the first to initiate the next (with maybe a result from the first one), or do you want them all to be launched in parallel?

[trincot]

Why complicate things with Promise.all when in OP is speaking about one promise only?

[Jake Kalstad]

He mentions multiple HTTP requests ---otherwise he could simply drop the toPromise() call entirely and just use the value I'd assume--- This is incorrect, angular http.get is actually returning an observable which I didn't think about.

[sandum]

@JakeKalstad i think this is a really good solution. We can use promises and Promide.all() to join them instead of using multiple nested subscribes.

[SirDieter]

Is there any reason not to create an observables array and use the RxJS operator forkJoin and subscribe to the resulting observable?