Wait for Http Request in Angular

how to wait for http request for returning response with in subscribe method in angular 8?

You need to use toPromise() in this case with await keyword. It will wait for request to complete before moving to next loop and sending new request.

var res= await this.http
.post('http://api.interiordesigns2020.com/api/services/app/ImageProject/CreateProjectImages', fd).toPromise();

imagename.imageid = res.result;

Remember to use async keyword accordingly.

Wait for the HTTP request to be completed to continue the rest of the script in Angular

You can use operators like this:

getData(fId: string | null = null) {

    return this.getDataFromAPI().pipe(
        tap(data => {
            this.tempItems = [data]
        }),
        map(data => {
             let items = cloneDeep([data]);

             // Separate the items by folders and files
             const a: Item[] = items.filter(item => item.type === 'a');
             const b: Item[] = items.filter(item => item.type !== 'b');

             const path: Item[] = [];
             //do some work

            // Create  data

            return {
                folders: a,
                files: b,
                path
            };
        }),
        tap(data => {
              this._items.next(data);
        })
    );
}

• tap is used to apply side effects and doesn't change the emitted value
• map is used to transform the emitted value

Wait for http request to complete in angular 4 service

You should return a promise (or Observable) from your service, and subscribe to that in the component.

Without doing so, the component has no way of knowing when your asynchronous code has finished executing, so it prints that log statement immediately

Change the service like so:

getData(){
    console.log("Started.. in service");
    return this.http.get('http://host/url').toPromise()
        .then(res => this.extractData(res));
}

Then in the component

submit(){
    this.dataService.getData().then(() => {
        console.log('after executing service');
        this.router.navigate(['/view']);
    };
};

How can i wait another http call?

You can achieve that by assigning the first request to Observable then wait for this Observable to emit a value in the second button method like the following:

obs1$: Observable<any>;
httpOne() {
    this.obs1$ = this.http.get('some-url-1');
    this.obs1$.subscribe((response) => {
        // do something here with response
    });
}

httpTwo() {
    // if the obs1$ has a value, then it will wait it to emit a value, then switch to the second request,
    // otherwise, it will switch to the second request directly.
    (this.obs1$ || of(true)).pipe(switchMapTo(this.http.get('some-url-2'))).subscribe((response) => {
        // do something here with second respone
    });
}

Wait for HTTP Response before show component

I have a solution which works. It is very simple:

The used ngIf is my best friend here:

<div *ngIf="alreadySelected">
  You have selected object {{ selectedObject }}
</div>

I just set the boolean for ngIf after everything is done inside the callback.

  initTheComponent(data: any): void {
    console.log(3);
    if (data.selected) {
      this.objectService.getSelectedObject("someuser").subscribe(
        data => {
          console.log(4);
          this.selectedObject = data.selectedObject;
          this.alreadySelected = true; // <------------------ set this after setting the date
        }
      );
    }
    if (!data.selected) {
      this.objectService.findAll().subscribe(
        data => { 
          console.log(5);
          this.selectableObjects = data; 
          this.alreadySelected = false; // <------------------ set this after setting the date
        }
      );
    }
  }

Until the boolean is not set, it is undefined. Until it is undefined, the ngIf-part will not be rendered.

Forcing to wait HTTP get request until finish in Angular

Your read method is async. You need to await it like this

async ngOnInit() {
    await this._settings.read();
    this.getAll();
}

How to wait for Http answer in TypeScript - Angular 5

Actually you can't wait to a asynchronous code and return something from it.As you use promise, you need to use thenable functions and write the rest logic which is related to the result of it in that thenable functions. In your case it will be

Login(Password : string, Username : string, ServerRootURL : string): Promise<string>  {
      let url = ServerRootURL + "api/AdminApp/RegisterToken";
      return this.http.post(url, { "Username": Username, "Password": Password }).toPromise()
                      .then(res => this.token =  res.json())
                      .catch(msg => console.log('Error: ' + msg.status + ' ' + msg.statusText))
 }

and you need to use it like

Login('password', 'username', 'http://localhost:8081').then(token => your logic here)

---

Related Topics