从Angular组件的服务中捕获Promise错误

Question

大家好，我在角度创建的邮政服务遇到了问题。 当我调用服务时，努力从组件中捕获错误。 我能够从服务中捕获错误，但是我需要从组件中执行此操作以正确处理错误。 任何建议将不胜感激。

服务

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;
}

零件

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

我是否需要更新服务中的某些内容以允许我从组件中捕获错误？

Answer 1

您在此处创建自己的Promise ，但是如果您要包装的Promise 拒绝 （引发错误），则永远不要调用reject 。 这被称为new Promise反模式 。 在您的情况下，您可以简单地删除此包装器，并用return代替要resolve的调用，以实现所需的功能，例如：

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

为了提供更多上下文，您可以通过调用reject来解决原始问题。 看起来像这样：

// 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;
}

但是，正如我上面说的那样，这过于复杂且不必要。 我希望它能演示您的组件对Promise的访问方式如何永远不会看到HTTP调用中发生的错误。