angular 中的错误处理使用带有 pipe 和 map 的 try catch

Question

How can I return an error and send it to the component ts so that the users can detect whats the error? Codes below is a login function.

I want an error message coming from the API to return at component ts and display it as angular material toast.

signIn(payload: signInRequestPayload): Observable<Account> {

try {
  return this.query({
    document: login_user
    payload,
  }).pipe(
    map((result: any) => {

      console.log(result);
      if (result.data.length) {
        return result.data[0] as Account;
         }
        throw Error("")
    })
  );
} catch (error) {
  throw Error(`Unable to retrieve user account`);
}

}

Answer 1

We can throw an error inside of the map and the subscriber can handle the error.

signIn(payload: signInRequestPayload): Observable<Account> {
  return this.query({
    document: login_user,
    payload,
  }).pipe(
     map((result: any) => {
       if (result.data.length) {
         return result.data[0] as Account;
       } else {
         throw new Error('...');
       }
     });
  );
}

Then it should be up to the subscriber to handle the error:

The first callback function is for success and the second callback is for the error scenario.

signIn.subscribe(response => {/* successful response */}, error => {/* error response */});