如何手动抛出可观察到的错误？

Question

I am working on an Angular 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, ie

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 is defined that way.

How can I throw an error message 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

throw Observable.throw(response);

Answer 5

Here is the official example (that emits number 7 and then error 'oops!'):

import { throwError, concat, of } from 'rxjs';

const result = concat(of(7), throwError(new Error('oops!')));
result.subscribe(x => console.log(x), e => console.error(e));

From: https://rxjs-dev.firebaseapp.com/api/index/function/throwError

Answer 6

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 7

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 8

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)) 

Answer 9

rxjs 7

throwError(() => new Error(response))

more info https://rxjs.dev/deprecations/breaking-changes#throwerror

Answer 10

You can use catchError(error) => console.log(error) inside a pipe