Retrieve the variable only once a response has been received from the POST request

Question

Retrieve the variable only once a response has been received from the POST request

Is there a way to update a variable in my component only after receiving a response from a POST request?

Here is the code in component.ts:

formSubmit() {
    this.sent = this.submitProvider.sendByPost(this.form);
    this.formSent = this.submitProvider.formSent;
}

The code in service/provider.ts looks like this:

sendByPost(form) {
    return this.http.post("http://app.api.com/mail/", form, httpOptions)
        .subscribe(
            data => (
                this.formSent = true,
            ), // success path
            error => (console.log(error)), // error path,
            () => this.formSent = true
        )
}

javascript angular typescript ionic-framework

Answer 1

Answer №1

Perhaps you could consider implementing this approach for your service

sendByPost(form) {
    return this.http.post("http://app.api.com/mail/", form, httpOptions).toPromise() // you won't need an observable here
  }

Then, in the component, subscribe to it like this:

this.submitProvider.sendByPost(this.form).then(res => this.formSent = true)

Alternatively, you can keep it as an observable and follow the same process:

   sendByPost(form) {
        return this.http.post("http://app.api.com/mail/", form, httpOptions) // you don't need an observable here
      }

The component code will look like this:

this.submitProvider.sendByPost(this.form).subscribe(res => this.formSent = true)

Answer 2

Perhaps you could consider implementing this approach for your service

sendByPost(form) {
    return this.http.post("http://app.api.com/mail/", form, httpOptions).toPromise() // you won't need an observable here
  }

Then, in the component, subscribe to it like this:

this.submitProvider.sendByPost(this.form).then(res => this.formSent = true)

Alternatively, you can keep it as an observable and follow the same process:

   sendByPost(form) {
        return this.http.post("http://app.api.com/mail/", form, httpOptions) // you don't need an observable here
      }

The component code will look like this:

this.submitProvider.sendByPost(this.form).subscribe(res => this.formSent = true)

Retrieve the variable only once a response has been received from the POST request

Answer №1

Similar questions

Using ng-repeat with deeply nested objects

Guidance on loading JSON array information into highcharts using AngularJS

Angularjs: The Art of Loading Modules

Implementing ControlValueAccessor in Angular 2 - A step-by-step guide

Difficulties in Networking Requests Following Event Emitter Notification in an Angular Application

Is AWS CDK generating nested cdk.out directories during synthesis?

Enhancing React Functionality: Increasing React State Following an If Statement

An elusive melody that plays only when I execute the play command

Troubleshooting: How can I ensure my custom scrollbar updates when jQuery niceselect expands?

The challenge with our unique PHP/JS Analytics Solution

Assign the output of an XQuery query to a variable in JavaScript

"Patience is key when it comes to waiting for an HTTP response

Guide to selecting a specific year on a calendar using Selenium with JavaScript

A guide to implementing asynchronous validation with reactive/model-driven forms in Angular 2

Using HTML5 video with cue points and stop points

How can you programmatically deselect all checkboxes in a list using React hooks?

What steps should I take to develop an Outlook add-in that displays read receipts for action items in sent emails?

Exploring the functionalities of arrays in Typescript: A beginner's guide

Exploring ways to fetch an HTTP response using a TypeScript POST request

Typescript absolute imports are not being recognized by Visual Studio Code