각도2 처리 http 응답

각도2 처리 http 응답

나는 단지 서비스 내에서 http 요청의 응답을 구조화하고 처리하는 것에 대한 질문이 있다.나는 Angul2.alpha46 Typecript를 사용하고 있다. (이제 막 테스트를 시작했는데, 내가 좋아하는 것은...Ps.. 그동안 github를 통해 노력하며 공헌해 온 모든 분들께 감사드린다 )

따라서 다음을 수행하십시오.

로그인 양식.구성 요소.ts

import {Component, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
import {UserService} from '../../shared/service/user.service';
import {Router} from 'angular2/router';
import {User} from '../../model/user.model';
import {APP_ROUTES, Routes} from '../../core/route.config';

@Component({
    selector: 'login-form',
    templateUrl: 'app/login/components/login-form.component.html',
    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
})

export class LoginFormComponent {
    user: User;
    submitted: Boolean = false;

    constructor(private userService:UserService, private router: Router) {
        this.user = new User();
    }

    onLogin() {
        this.submitted = true;

        this.userService.login(this.user,
            () => this.router.navigate([Routes.home.as]))
    }
}

이 구성 요소에서 사용자 로그인을 위한 내 http 요청을 저장할 userService를 가져오면 서비스는 다음과 같다.

user.service.ts

import {Inject} from 'angular2/angular2';
import {Http, HTTP_BINDINGS, Headers} from 'angular2/http';
import {ROUTER_BINDINGS} from 'angular2/router';
import {User} from '../../model/user.model';

export class UserService {

    private headers: Headers;

    constructor(@Inject(Http) private http:Http) {
    }

    login(user: User, done: Function) {
        var postData = "email=" + user.email + "&password=" + user.password;

        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/x-www-form-urlencoded');

        this.http.post('/auth/local', postData, {
                headers: this.headers
            })
            .map((res:any) => res.json())
            .subscribe(
                data => this.saveJwt(data.id_token),
                err => this.logError(err),
                () => done()
            );
    }

    saveJwt(jwt: string) {
        if(jwt) localStorage.setItem('id_token', jwt)
    }

    logError(err: any) {
        console.log(err);
    }
}

내가 하고 싶은 것은 http 요청 후 호출이 반환하는 응답을 처리할 수 있는 것이다.예를 들어 사용자 자격 증명이 잘못된 경우 백엔드에서 401 응답을 전달한다.내 질문은 응답을 처리하는 가장 좋은 방법이 어디인가 하는 것이다. 그리고 내가 메소드를 호출한 구성 요소로 결과를 되돌리는 것이다. 그래서 나는 보기를 조작하여 성공 메시지를 표시하거나 오류 메시지를 표시할 수 있다.

로그인한 내 서비스에서 나는 현재 응답을 처리하지 않고 있다. 나는 단지 원래의 구성 요소로 다시 콜백을 하고 있다. 그러나 나는 이것이 올바른 방법이 아니라고 느낀다.이 전형적인 시나리오에서 그들이 무엇을 할 것인가를 조명할 수 있는 사람이 있는가?구독 기능의 첫 번째 매개 변수에서 다음과 같이 응답을 처리하시겠습니까?

 login(user: User, done: Function) {
     var postData = "email=" + user.email + "&password=" + user.password;

    this.headers = new Headers();
    this.headers.append('Content-Type', 'application/x-www-form-urlencoded');

    this.http.post('/auth/local', postData, {
            headers: this.headers
        })
        .map((res:any) => res.json())
        .subscribe(
            (data) => {
                // Handle response here
                let responseStat = this.handleResponse(data.header)

                // Do some stuff
                this.saveJwt(data.id_token);

                // do call back to original component and pass the response status
                done(responseStat);
            },
            err => this.logError(err)
        );
}

handleResponse(header) {
    if(header.status != 401) {
        return 'success'
    } 

    return 'error blah blah'
}

이 경우에 다시 전화하는 것은 괜찮은가? 아니면 이것이 관찰 가능한 혹은 약속으로 더 잘 처리될 수 있을까?

내가 묻고 싶은 건...http 응답의 응답을 처리하고 user.service.ts에서 login-form.component.ts로의 양식 보기에서 상태를 처리하는 최선의 방법은 무엇인가?

업데이트 알파 47

알파 47을 기준으로 (알파46 이하에 대한) 아래의 답변은 더 이상 필요하지 않다.이제 Http 모듈은 자동으로 반환된 적로를 처리한다.그래서 지금은 다음과 같이 쉽다.

http
  .get('Some Url')
  .map(res => res.json())
  .subscribe(
    (data) => this.data = data,
    (err) => this.error = err); // Reach here if fails

알파 46 이하

응답은 다음에서 처리할 수 있다.map(...), 앞에subscribe.

http
  .get('Some Url')
  .map(res => {
    // If request fails, throw an Error that will be caught
    if(res.status < 200 || res.status >= 300) {
      throw new Error('This request has failed ' + res.status);
    } 
    // If everything went fine, return the response
    else {
      return res.json();
    }
  })
  .subscribe(
    (data) => this.data = data, // Reach here if res.status >= 200 && <= 299
    (err) => this.error = err); // Reach here if fails

여기 간단한 예가 있는 plnkr이 있다.

다음 릴리스에서는 모든 상태 코드가 200 이하 및 299를 초과하면 자동으로 오류가 발생하므로 직접 확인할 필요가 없으므로 이 작업이 필요하지 않다는 점에 유의하십시오.자세한 내용은 이 커밋을 확인하십시오.

angu2 2.1.1에서 (데이터), (오류) 패턴을 사용하여 예외를 잡을 수 없어서 .catch(...)를 사용하여 구현했다.

그것은 .retry .map 등과 같은 관찰 가능한 체인으로 연결된 다른 모든 방법들과 함께 사용될 수 있기 때문에 좋다.

import {Observable} from 'rxjs/Rx';


  Http
  .put(...)
  .catch(err =>  { 
     notify('UI error handling');
     return Observable.throw(err); // observable needs to be returned or exception raised
  })
  .subscribe(data => ...) // handle success

문서화:

돌아온다

(관찰 가능):소스 시퀀스가 성공적으로 종료될 때까지 연속된 소스 시퀀스의 요소를 포함하는 관측 가능한 시퀀스.

서비스:

import 'rxjs/add/operator/map';

import { Http } from '@angular/http';
import { Observable } from "rxjs/Rx"
import { Injectable } from '@angular/core';

@Injectable()
export class ItemService {
  private api = "your_api_url";

  constructor(private http: Http) {

  }

  toSaveItem(item) {
    return new Promise((resolve, reject) => {
      this.http
        .post(this.api + '/items', { item: item })
        .map(res => res.json())
        // This catch is very powerfull, it can catch all errors
        .catch((err: Response) => {
          // The err.statusText is empty if server down (err.type === 3)
          console.log((err.statusText || "Can't join the server."));
          // Really usefull. The app can't catch this in "(err)" closure
          reject((err.statusText || "Can't join the server."));
          // This return is required to compile but unuseable in your app
          return Observable.throw(err);
        })
        // The (err) => {} param on subscribe can't catch server down error so I keep only the catch
        .subscribe(data => { resolve(data) })
    })
  }
}

앱에서:

this.itemService.toSaveItem(item).then(
  (res) => { console.log('success', res) },
  (err) => { console.log('error', err) }
)

참조URL: https://stackoverflow.com/questions/33941836/angular2-handling-http-response