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。你可以利用這個功能TypeScriptawait和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>