Why this Angular HttpClient Post doesn't get synchronous?

Question

Both foo() and addProduct() are methods of same class. addProduct() gets called when a form it's submitted. I was expecting to be displayed first "ok1" and then "ok2" inside Console but it's happening otherwise. I'm doing something wrong?

  async foo(url, obj) {
     const result = await this.http.post(url, obj).toPromise();
     return result;
  }

  addProduct(ProductName, ProductDescription, ProductPrice) {
    const obj = {
      ProductName,
      ProductDescription,
      ProductPrice
    };

    this.foo("http://localhost:4000/products/add", obj).then( (result) => {
        console.log("ok1");
    });
    console.log("ok2");
  }

score 0 · Answer 1 · answered Feb 07 '20 at 13:20

0

console.log("ok2")

is run immediately after sending off the http request. When the http request comes back,

console.log("ok1")

is run

answered Feb 07 '20 at 13:20

Kurt Hamilton

12,490
1
24
40

score 0 · Accepted Answer · answered Feb 07 '20 at 13:20

foo call is asynchronous so it is obvious that calling method will finish its execution irrespective of foo method call. If you need to call ok1 first and then ok2, then you need to call ok2 from inside the result handling part of foo method call.

see below code

async foo(url, obj) {
     const result = await this.http.post(url, obj).toPromise();
     return result;
  }

  addProduct(ProductName, ProductDescription, ProductPrice) {
    const obj = {
      ProductName,
      ProductDescription,
      ProductPrice
    };

    this.foo("http://localhost:4000/products/add", obj).then( (result) => {
        console.log("ok1");
       console.log("ok2"); // this will ensure that ok2 will be always after ok1
    });
  }

Priyanshu · Answer 3 · 2020-02-07T13:47:03.217

Make addProduct as async method.

Note You are getting unexpected output because http call happen asynchronously. But the output you getting according to your code is correct. You can learn more about async JavaScript here (MDN)

async foo(url, obj) {
     const result = await this.http.post(url, obj).toPromise();
     return result;
}

async addProduct(ProductName, ProductDescription, ProductPrice) {
    const obj = {
      ProductName,
      ProductDescription,
      ProductPrice
    };

    const result = await this.foo("http://localhost:4000/products/add", obj)
    console.log("ok1");
    console.log("ok2");
}

Why this Angular HttpClient Post doesn't get synchronous?

3 Answers3