CODEWITHSUNDEEP
angularangular-httpclient
Test admin
Test admin

Reputation: 731

Run http service synchronously

I will get some response from below code:

this.http.post("http://localhost/angular5/user-add.php", this.myform.value, {responseType: 'json'}).subscribe(
            data => {
                console.log(data)
            }
        )

After getting the result, I need to run below code:

this.http.post("http://localhost/angular5/user.php", formData).subscribe(
            imageData => {
                console.log(imageData)
            }
        )

I need to run this code synchronously. How to make it synchronous? Now the secondary code is not waiting for the primary code.

Upvotes: 1

Views: 1000

Answers (4)

DarkNeuron
DarkNeuron

Reputation: 8711

The easiest is probably async/await, without getting into Rx territory (you might not wanna delve in there).

async doSomething() {
   const req1 = await this.http.post("http://localhost/angular5/user-add.php", this.myform.value, {responseType: 'json'}).pipe(first()).toPromise();

   const req2 = await this.http.post("http://localhost/angular5/user.php", formData).pipe(first()).toPromise();

   console.log(req1, req2);
}

The async keyword basically makes the function-body behave like its synchronous. It will always return a promise, so you might need to await doSomething().

Hope that makes sense.

Upvotes: 3

Anup
Anup

Reputation: 618

If I understand the question correctly, it is clear that you need to post second request (user) after first post response (useradd)

Since http.post returns an observable, instead of subscribing to this directly, you may chain the first observable to second observable and subscribe to that instead. switchMap (or flatMap) seems to be the operator you need.

Something like this:

import { switchMap } from 'rxjs/operators';

const firstRequest = this.http.post("http://localhost/angular5/user-add.php", this.myform.value, {responseType: 'json'});

const secondRequest = switchMap( data => {
    console.log(data); //First request data. Chain it to second request.
    return this.http.post("http://localhost/angular5/user.php", formData);
});

const combinedRequest = secondRequest(firstRequest);

combinedRequest.subscribe(imageData => console.log(imageData));

Note that first request won't be fired until you call subscribe on the combinedRequest

Upvotes: 1

David
David

Reputation: 34465

You can also convert your observable to a function and use async/await

async yourMethod()
{
    //first call
    let data = await this.http.post("http://localhost/angular5/user-add.php", this.myform.value, {responseType: 'json'}).toPromise();
    console.log(data);

    //2nd call - executes after the first one
    this.http.post("http://localhost/angular5/user.php", formData).subscribe(
        imageData => {
            console.log(imageData)
        }
    )
}

Upvotes: 0

Tomasz Kula
Tomasz Kula

Reputation: 16847

You cannot make the asynchronous code synchronous. What you can do is delay the execution of the second request until the first one returns.

Somebody in the comments suggested using flatMap or switchMap, but it doesnt't look like the second request will use the value returned by the first one. If this is the case, a simple concat should work.

import { concat } from 'rxjs/observable';

const addUser$ = this.http.post(
    "http://localhost/angular5/user-add.php", 
    formValue, 
    {responseType: 'json'}
);

const postUser$ = this.http.post("http://localhost/angular5/user.php", formData);

// addUser$ will execute first, than postUser$
concat(addUser$, postUser$)
  .subscribe(// ...)

Upvotes: 0

Related Questions