javascript - how to display http error message angular 6 - Stack Overflow

admin管理员组

文章数量:1290418

I am using the below methods to send data. I want to display an error response on my ponent. How can I console log error message in my ponent?

ponent.ts

signup(){ 
    return this.loginservice.signupUser(this.model).subscribe(data => {
        console.log(data.error);
    });
}

service ts

signupUser(signupuserModel: any = {}):Observable<any>{
    return this.http.post(`${this.signuouserurl}`,signupuserModel)
}

error message

I am using the below methods to send data. I want to display an error response on my ponent. How can I console log error message in my ponent?

ponent.ts

signup(){ 
    return this.loginservice.signupUser(this.model).subscribe(data => {
        console.log(data.error);
    });
}

service ts

signupUser(signupuserModel: any = {}):Observable<any>{
    return this.http.post(`${this.signuouserurl}`,signupuserModel)
}

error message

• javascript
• angular6

Share Improve this question Follow edited Feb 26, 2019 at 7:08 fiza khan 1,2961414 silver badges2424 bronze badges asked Feb 26, 2019 at 4:23 kumarakumara 93744 gold badges2323 silver badges4646 bronze badges 1

• What is the output of console.log(data.error); – brk Commented Feb 26, 2019 at 4:24

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

In RxJS, subscribe() method can have 3 functions

1. next() if observable emits value.
2. error() if there's an error thrown from the Observable
3. plete() if the observable is pleted.

What you need to do is to add an extra arrow function in your server call inside subscribe() method

public error: any; 

signup() { 
    return this.loginservice.signupUser(this.model).subscribe(success => {
        console.log(success);
    }, error => { // second parameter is to listen for error
        console.log(error);
        this.error = error;
    });
}

If you want to show the error in your ponent.html, you can use the interpolation {{ }}

ponent.html

<div class="error">{{ error }}</div>

try

signup() { 
  return this.loginservice.signupUser(this.model).subscribe(data => {
    console.log(data);
  }, err => {
    console.log(err);
  });
}

You can also use try-catch approach in following way

async signup() { 
  try {
    let data = await this.loginservice.signupUser(this.model).toPromise();
    console.log(data)
  } catch (e) {
    console.log(e);
  }
}

However not all http codes raise exception

you can choose any method to display an error.. on of the best way is seprate the success and error response with following code (for this your http call must thrown an exception if not then you have to chose the second option )

signup() { 
  return this.loginservice.signupUser(this.model).subscribe(success => {
    console.log(success);
  }, error => {
    console.log(error);
  });
}

or you can write conditional code like

    signup() { 
          return this.loginservice.signupUser(this.model).subscribe(success => {
            console.log(data);
    if(success.status == 406){ console.log("success")} 
else { console.log("Error ") }
          }
        }

本文标签： javascripthow to display http error message angular 6Stack Overflow