javascript - Catch error in promise from a service in an Angular component - Stack Overflow

admin管理员组

文章数量:1344645

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

Share Improve this question Follow edited Aug 30, 2018 at 9:41 Galactic Ranger asked Aug 30, 2018 at 8:41 Galactic RangerGalactic Ranger 89233 gold badges1515 silver badges3131 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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.

本文标签： javascriptCatch error in promise from a service in an Angular componentStack Overflow