从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，但是如果您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调用中发生的错误。