कोणीय 2 + ngrx/हैंडलिंग विफलता के लिए स्टोर HTTP अनुरोध

Question

मैं HTTP क्रियाओं को बनाने और प्रेषण के लिए एक सरल कोड पथ चाहता हूं।

this.http.request(...) 
    .map((res: Response) => res.json()) 
    .catch((err: any) => err.json()) 
    .map((payload: any) => { type: 'SUCCESS', payload }) 
    .catch((payload: any) => { type: 'FAILURE', payload}) 
    .subscribe((action: Action) => this.store.dispatch(action)); 

इस तरह दोनों सफलता और विफलता की प्रतिक्रियाएं सफलता पर आधारित JSON में बदल रही हैं और फिर/असफल मापदंड आवंटित सही कमी प्रकार ताकि दुकान संचालित किया जा सकता: मुझे क्या करना चाहते हैं की तरह कुछ है ठीक से (उपयोगकर्ता लॉगिन सफलता और विफलता जो 200 या 401 देता है) सोचें।

क्या इसका संचालन करने का कोई क्लीनर या बेहतर तरीका है? वर्तमान में दूसरा .catch अच्छा नहीं खेलता है क्योंकि यह एक अवलोकन योग्य नहीं लौटा रहा है।

सुझाव या अन्य समाधान स्वागत है?

Answer 1

अपनी सेवाओं में से एक में मैं इस तरह यह कार्य करें:

get(url, actionType) { 
    this._http.get(BASE_URL + url) 
    .map(response => response.json()) 
    .map(payload => ({ type: actionType, payload })) 
    .subscribe(action => this.store.dispatch(action), error => this._apiErrorHandler(error)); 
} 

private _apiErrorHandler(response) { 
    let payload = response.json().error; 
    this.store.dispatch({ type: 'API_ERROR', payload }); 
} 

Answer 2

ngrx से example-app से, के लिए इस मामले का उपयोग करने के @Effects (डॉक्स फ़ोल्डर की जाँच), और IMO की सिफारिश की है, एक और अधिक स्पष्ट है जिस तरह से, सेवा की जाँच करें:

@Injectable() 
export class AuthService { 
    private headers: Headers; 
    private API_ENDPOINT: string = "/api/user/"; 

    public constructor(
     private http: Http, 
     private localStorageService: LocalStorageService 
     ) { 
     this.headers = new Headers({ 'Accept': 'application/json' }); 
    } 

    public login(email: string, password: string): Observable<AuthUser> { 
     return this.http 
     .post(this.API_ENDPOINT + 'login', { 'email': email, 'password': password }, this.headers) 
     .map(res => res.json().data as AuthUser) 
     .catch(this.handleError); 
    } 

    private handleError(error: Response | any) { 
     let body = error.json(); 
     // .. may be other body transformations here 
     console.error(body); 
     return Observable.throw(body); 
    } 
} 

और प्रभाव की जाँच करें:

@Injectable() 
export class AuthEffects { 

    constructor(
     private actions$: Actions, 
     private authService: AuthService, 
     private localStorageService: LocalStorageService 
    ) { } 

    @Effect() logIn$: Observable<Action> = this.actions$ 
     .ofType(auth.ActionTypes.LOGIN) 
     .map((action: Action) => action.payload as LoginCredentials) 
     .switchMap((credentials: LoginCredentials) => this.authService.login(credentials.email, credentials.password)) 
     .do((user: AuthUser) => this.localStorageService.setUser(user)) 
     .map((user: AuthUser) => new auth.LoginSuccessAction(user)) 
     .catch((error) => of(new auth.FlashErrors(error))); 

} 

जरुर, आप सेटअप appModule पर प्रभाव की जरूरत है:

@NgModule({ 
imports: [ 
    StoreModule.provideStore(reducer), 
    EffectsModule.run(AuthEffects), 
    RouterStoreModule.connectRouter(), // optional but recommended :D 
], 
declarations: [...], 
providers: [AuthService, LocalStorageService, ...] 
}) 
export class AuthModule {} 

रेपो से डॉक्स फ़ोल्डर पर ngrx/प्रभाव के बारे में अधिक पढ़ें।