javascript - 从 Angular 组件中的服务捕获 promise 中的错误

Question

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

服务

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在这里，但你永远不会调用 reject如果Promise你正在包装 拒绝(抛出错误)。这被称为 the new Promise antipattern .在你的情况下，你可以简单地删除这个包装器并替换对 resolve 的调用。用return为了实现你所需要的，像这样:

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 调用中发生的错误。