How to throw observable error manually in angular2?

Question

I am working on angular2 app in which I am making a rest call through HTTp as below:

login(email, password) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    let options = new RequestOptions({ headers: headers });
    let body = `identity=${email}&password=${password}`;
    return this.http.post(`${this._configService.getBaseUrl()}/login`, body, options)
    .map((res: any) => {
        let response: any = JSON.parse(res._body);
        if (response.success == 0) {
          Observable.throw(response);  // not working
        } else if (response.success == 1) {
          console.log('success');
          localStorage.setItem('auth_token', 'authenticated');
          this.loggedIn = true;
          return response;
        }
    });
}

basically I want my component to get response & error in my subscribe call.

i.e.

this._authenticateService.login(this.loginObj['identity'],this.loginObj['password']).subscribe(
  (success)=>{      
    this.credentialsError=null;  
    this.loginObj={};  
    this._router.navigate(['dashboard']);    
  },
  (error)=>{
    console.log(error);        
    this.credentialsError=error;     
  }
);

but my api always returns success as it id defined that way.

So I want to know how can I throw error msg if response.success == 0 , so that it will be accessed inside error argument of my subscribe callback.

Answer 1

if (response.success == 0) {
   throw Observable.throw(response);  
 } 

Edit for rxjs 6:

if (response.success == 0) {
   throw throwError(response);  
 } 

Answer 2

rxjs 6

import { throwError } from 'rxjs';

if (response.success == 0) {
  return throwError(response);  
}

rxjs 5

import { ErrorObservable } from 'rxjs/observable/ErrorObservable';

if (response.success == 0) {
  return new ErrorObservable(response);  
}

What you return with ErrorObservable is up to you

Answer 3

with rxjs 6

import { throwError } from 'rxjs';
throwError('hello');

Answer 4

rxjs 5

Either

throw response;

or

return Observable.throw(response);  // not working

Answer 5

Use the catch operator

this.calcSub = this.http.post(this.constants.userUrl + "UpdateCalculation", body, { headers: headers })
   .map((response: Response) => {
      var result = <DataResponseObject>response.json();
         return result;
   })
   .catch(this.handleError)
   .subscribe(
      dro => this.dro = dro,
      () => this.completeAddCalculation()
   );

And handle the error like this:

private handleError(error: Response) {
    console.error(error); // log to console instead
    return Observable.throw(error.json().error || 'Server Error');
}

Answer 6

Most of my issues were related to the imports, so here's the code that worked for me...

import {_throw} from 'rxjs/observable/throw';
login(email, password) {
...
    return this.http.post(`${this._configService.getBaseUrl()}/login`, body, options)
    .map((res: any) => {
...
        if (response.success == 0) {
           _throw(response);  
        } else if (response.success == 1) {
...
        }
    });
}

This will be the solution if you are facing errors like...

ERROR TypeError: WEBPACK_IMPORTED_MODULE_2_rxjs_Observable.Observable.throw is not a function

Answer 7

Usually when you're throwing an error you'll be doing so at the exact moment the problem occurred and you want to raise it immediately, but this may not always be the case.

For instance there is the timeoutWith() operator, which is perhaps one of the most likely reasons you'll need to do this.

results$ = server.getResults().pipe(timeoutWith(10000, ....) )

This takes an 'error factory', which is a function.

 errorFactory = () => 'Your error occurred at exactly ' + new Date()

eg.

results$ = server.searchCustomers(searchCriteria).pipe(timeoutWith(10000, 
              () => 'Sorry took too long for search ' + JSON.stringify(searchCriteria)) )

Note that when using timeoutWith you'll never get the actual server response back - so if the server gave a specific error you'd never see it. This above example can be very useful in debugging, but be sure not to display the error to the end user if you use the above example.

AN error factory is helpful because it doesn't evaluate the code until the actual error occurs. So you can put 'expensive' or debugging operations inside that will get executed when the error is actually finally needed.

If you need to use a 'factory' to create your error somewhere other than in timeout you can use the following.

 EMPTY.pipe(throwIfEmpty(errorFactory))