Use promise with async

Question

I'd like to get Object using Promise. Bellow, is the method:

async getUri()
  {
      var data = this.userService.getOrders();
      var outside_uri = await data.then((uri) => { console.log('inside => ' + uri); return uri;})
      console.log('outside => ' + outside_uri)
  }

where

getOrders(): Promise<Profession[]>
    {
        return this.http.get<Profession[]>(`${this.baseUrl}/users/professions/id/2`)
                        .toPromise()
                        .then((response) => response);
    }

But when I call this method on ngOnInit() like that:

console.log("-----Result: " + this.getUri());

It produces:

-----Result: [object Promise]

inside => [object Object]

outside => [object Object]

Have you please any idea about solving that ?. Big Thanks.

`this.getUri().then(uri => console.log('-----Result:' + uri))` or you need `await this.getUri()` — Alexander Staroselsky, Jun 28 '19 at 15:30
Hello Sir @AlexanderStaroselsky, thanks for your reply I tried `console.log(this.getUri().then(uri => console.log('-----Result:' + uri)));`, but, I got `inside => [object Object] outside => [object Object] -----Result:undefined` — Jolia, Jun 28 '19 at 15:33

Abdulrahman Falyoun · Accepted Answer · 2019-06-28T16:00:38.340

4

Your code has a tiny mistake in getOrders function since you're solving the promise within the body of the method , and the function expect you to get a promise

So edit your code to fit the following

getOrders(): Promise<any>
    {
        return this.http.get(`${this.baseUrl}/users/professions/id/2`)
                        .toPromise();
    }

And

async getUri()
  {
      let data = this.userService.getOrders();
      let outside_uri;
      await data.then((uri) => { 
           console.log('inside => ' + uri); 
           outside_uri = uri;
        })
      console.log('outside => ' + outside_uri)
  }

edited Jun 28 '19 at 16:00

answered Jun 28 '19 at 15:54

Abdulrahman Falyoun

3,676
3
16
43

Hello Sir @Abdurahman, thanks for your reply, but I got `-----Result: [object Promise] inside => [object Object] outside => [object Object]` when I call **this.getUri()** on **ngOnInit()** – Jolia Jun 28 '19 at 15:58
Then try not to cast it to ``Profession[]`` until you sure that your ``API`` gives you a result you can cast it to – Abdulrahman Falyoun Jun 28 '19 at 16:00
See updated answer and tell me what it prints – Abdulrahman Falyoun Jun 28 '19 at 16:01
Hello Sir @Abdulrahman, I tried your proposition. I got `--------------[object Promise] inside => [object Object] outside => [object Object]` – Jolia Jul 01 '19 at 07:49
this url got `{ "id": 2, "libelle": "Engineer", "selected": false }` – Jolia Jul 01 '19 at 07:52
Ok Sir, it solved. On init, I made `this.getUri().then(num => console.log(num));` – Jolia Jul 01 '19 at 08:41

ViqMontana · Answer 2 · 2019-06-28T15:50:50.490

0

You need to use await to wait for the promise to resolve.

You need to await this.userService.getOrders(); and this.getUri() in your console.log

So your console.log should look like:

var uri = await this.getUri()
console.log("-----Result: " + uri);

edited Jun 28 '19 at 15:50

answered Jun 28 '19 at 15:34

ViqMontana

5,090
3
19
54

Hello Sir @Viqas, thanks for your reply. I tried `async getUri() {var data = await this.userService.getOrders();}` and called `console.log("--------------" + this.getUri());` on **ngOnInit()** , I got `--------------[object Promise]` – Jolia Jun 28 '19 at 15:43
I meant you also need to await in your console.log, take a look at my updated answer. – ViqMontana Jun 28 '19 at 15:46
Thank Sir, getUri is async so I got `await is only allowed within an async function` – Jolia Jun 28 '19 at 15:49
move the call to `this.getUri()` out then, then log the value after. See my updated answer. – ViqMontana Jun 28 '19 at 15:51
I got the same error Sir. – Jolia Jun 28 '19 at 15:52
You need to make sure the function you are using `await` in, is an `async` function. – ViqMontana Jun 28 '19 at 15:53
Ok Sir, but as i made in my question **async** getUri() – Jolia Jun 28 '19 at 16:00

Use promise with async

2 Answers2