Angular Promise 不会捕获异常

Question

我有一个登录功能，我想捕获服务器启动的异常并将它们冒泡到带有错误消息的视图中。到目前为止，我使用promise 处理异步部分，并且我想使用catch() 部分来捕获我的异常。问题是 handler 函数永远不会被调用，我在浏览器控制台中得到错误。到目前为止，这是我的代码，非常基本：

login(username: string, password: string): Promise<User> {

    return this.http
      .get(this.loginUrl + '?username=' + username + '&password=' + password)
      .toPromise()
      .then(response => response.json())
      .catch(function(e){
          this.handler(e);
      })
  }

  handler (e: Response){
    throw e;
  }

我错过了什么吗？
谢谢。

编辑 我按照建议使用了arrow function，现在我的代码如下所示：

user.service.ts

login(username: string, password: string): Promise<User> {

    return this.http
      .get(this.loginUrl + '?username=' + username + '&password=' + password)
      .toPromise()
      .then(response => response.json())
      .catch(e => {
          this.handler;
      })
  }

  handler (e: Response){
    throw e;

  }

login.component.ts

onSubmit(loginForm: NgForm): string {

    this.userService.login(loginForm.value.username, loginForm.value.password)
    .then(data => {

      this.message = 'Nome: ' + data.nome +
                    ' Cognome: ' +data.cognome + 
                    ' Azienda: ' + data.azienda +
                    ' Ufficio: ' + data.ufficio;
    })
    .catch(e => {
        this.message = e;
      });

    return this.message;
  }

尽管如此，我还是从服务器获得了异常，但应用程序跳过了 catch() 块。

Answer 1

这不是您应该使用箭头函数的方式，也不是您处理async 请求的方式。首先，您确实不应该使用function 关键字，而是使用箭头符号。但是在您的 catch 语句中，您没有启动 handler 函数。

另一方面，您试图在onSubmit 中返回一个字符串。但是获取这个字符串的方法是async。为此，您可以利用 TypeScript await 和 async 功能。

user.service.ts

login(username: string, password: string): Promise<User> {

    return this.http
      .get(this.loginUrl + '?username=' + username + '&password=' + password)
      .toPromise()
      .then(response => response.json())
      .catch(this.handler)
}

handler = (e: Response) => {
    throw e;
};

注意箭头函数赋值。

login.component.ts

async onSubmit(loginForm: NgForm): Promise<string> {

    try {
       const data: any = await this.userService.login(loginForm.value.username, loginForm.value.password);
       this.message = `Nome: ${data.nome} Cognome: ${data.cognome} Azienda: ${data.azienda} Ufficio: ${data.ufficio}`;
    } catch (e) {
       this.message = e;
    }    

    return this.message;
}

请注意，您的 onSubmit 现在返回 Promise<string>