javascript - The right way to use toPromise in angular 6 - Stack Overflow

admin管理员组

文章数量:1346283

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()

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()

• javascript
• angular
• rxjs
• observable
• angular6

Share Improve this question Follow asked Jul 14, 2018 at 16:01 sandumsandum 79166 gold badges1414 silver badges2525 bronze badges 6

• Why you want to return Promise and why not Observable? Any specific reason? – Amit Chigadani Commented Jul 14, 2018 at 16:05
• @AmitChigadani, one could ask why Observable when Promise will do the job fine. – trincot Commented Jul 14, 2018 at 16:06
• @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. – Amit Chigadani Commented Jul 14, 2018 at 16:08
• True, but promises can benefit from the nice async/await syntax. – trincot Commented Jul 14, 2018 at 16:10
• @sandum Are you looking for a a pure promise style answer ? – madjaoue Commented Jul 14, 2018 at 16:12

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

https://developer.mozilla/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 plete before acting on the value.

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

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();

本文标签： javascriptThe right way to use toPromise in angular 6Stack Overflow