Hi everyone running into a problem with a post service I created in angular. Struggling to catch the error from my ponent when I call the service. I was able to catch the error from the service but I need to do this from my ponent to properly handle the error. Any advice would be greatly appreciated.

Service

sendData(obj) {
 let promise = new Promise((resolve) => {
   this.http.post(this.URL, obj, this.httpOptions)
     .toPromise()
     .then(
      res => {
        console.log(res);
        resolve(res);
      }
     )
     //.catch((err) => { 
     //  console.log(err);
     //  throw err;
     //});
   });
  return promise;
}

Component

this._myservice.sendData(this.myobj)
  .then(function (res) {
    console.log('data sent');
  })
  .catch(error => {
      console.warn('from ponent:', error);
      // this console warn never gets logged out
  });

Do I need to update something in my service to allow me to catch the error from the ponent?

Hi everyone running into a problem with a post service I created in angular. Struggling to catch the error from my ponent when I call the service. I was able to catch the error from the service but I need to do this from my ponent to properly handle the error. Any advice would be greatly appreciated.

Service

sendData(obj) {
 let promise = new Promise((resolve) => {
   this.http.post(this.URL, obj, this.httpOptions)
     .toPromise()
     .then(
      res => {
        console.log(res);
        resolve(res);
      }
     )
     //.catch((err) => { 
     //  console.log(err);
     //  throw err;
     //});
   });
  return promise;
}

Component

this._myservice.sendData(this.myobj)
  .then(function (res) {
    console.log('data sent');
  })
  .catch(error => {
      console.warn('from ponent:', error);
      // this console warn never gets logged out
  });

Do I need to update something in my service to allow me to catch the error from the ponent?

• javascript
• angular
• typescript
• es6-promise

1 Answer 1

You're creating your own Promise here, but you never call reject if the Promise you're wrapping rejects (throws an error). This is known as the the new Promise antipattern. In your case, you can simply remove this wrapper and replace the call to resolve with a return in order to achieve what you need, like so:

sendData(obj) {
    return this.http.post(this.URL, obj, this.httpOptions)
        .toPromise()
        .then(res => {
            console.log(res);
            return res;
        });
}

In order to provide more context, you could fix your original problem by calling reject. This would look like this:

// DONT'T DO THIS
sendData(obj) {
   let promise = new Promise((resolve, reject) => {
       this.http.post(this.URL, obj, this.httpOptions)
           .toPromise()
           .then(res => {
               console.log(res);
               resolve(res);
            })
            .catch((err) => { 
                console.log(err);
                reject(err); // Here.
            });
        });
    return promise;
}

But, as I said above, this is overplicated and unnecessary. I hope that it demonstrates how the Promise your ponent has access to could never see errors that occurred in the HTTP call.