Angular2处理HTTP响应

71

我只是有一个关于构造和处理服务中http请求的响应的问题。我正在使用Angular2.alpha46 Typescript（刚刚开始对其进行测试，我喜欢... Ps。

因此，请采取以下措施：

login-form.component.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]))
    }
}

从该组件中，我导入了userService，它将包含我的http请求以登录用户，该服务如下所示：

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的表单视图中的状态的最佳实践是什么？

typescript  angular 
— 尼格
source
在下一个发行版中（请参阅此commit），Http当您获得非200状态代码时将出错。现在，您可以在中处理响应map()，在此处检查状态并抛出错误或传递值。
— 埃里克·马丁内斯
感谢您的迅速答复Eric。凉！我以为是这样，并且我知道有些事情仍在讨论中……所以只是为了确认……您是否可以说它完全可以立即处理map中的响应状态并在回调中传递值？您能以更好的方式进行操作还是回电话就足够了？
— Nige 2015年
您根本不需要回调，请参阅我的回答，它有望回答您的问题：D
— Eric Martinez
太棒了，我从commit和plunker那里完全理解了处理标头状态的方法，但是我只是想知道将错误或成功数据传回给我从中调用该方法的原始组件的最佳方法是什么，以便我可以对其进行分配到变量并将其绑定到视图上。您的示例很棒，但是您正在该组件上调用http请求，因此您可以在同一组件中分配错误或成功数据，因为它的上下文是共享的。但是我该如何处理服务中的响应，然后在完成后将响应和代码逻辑传递给成功或失败
— Nige 2015年
1
我会将该逻辑移出服务范围。在服务中，我会做return http.post().map(/* handle result */)，然后在组件中，我会做this.userService.login(...).subscribe(/* handle data*/)
— Eric Martinez

Answers:

88

更新alpha 47

从alpha 47开始，不再需要以下答案（对于alpha46及以下）。现在，Http模块将自动处理返回的错误。所以现在很容易如下 

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

Alpha 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的状态代码都会自动引发错误，因此您不必自己检查它们。检查此提交以获取更多信息。

— 埃里克·马丁内斯（Eric Martinez）
source
您链接的plnkr无法正常工作，请修复它。我需要获取状态代码，而REST API命中时该如何获取呢？
— Pardeep Jain 2015年
@PardeepJain您不工作是什么意思？如果要使请求失败，只需注释掉第一个get，然后取消注释第二个。
— 埃里克·马丁内斯
1
如果我想一起返回res.status和res.json（）怎么办？
— Pardeep Jain 2015年
6
return {status: res.status, json: res.json()}
— 埃里克·马丁内斯
1
im在angular2 v2.1.1上，当服务器崩溃时，此方法不会触发错误部分。我看到zone.js在控制台中写出了异常。我确实需要拦截它以在UI中提供一些反馈
— Sonic Soul
11

在angular2 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

从 文档：

退货

（可观察的）：一个可观察的序列，其中包含来自连续源序列的元素，直到源序列成功终止为止。

— 音速之魂
source
问题：可观察的东西可以是没有错误的东西吗？否则，如果我再次抛出错误，那有什么意义？
— Vic
1
不明白你的意思。可观察不是错误。通常它将携带可以预订的数据对象。如果发生错误，将触发catch块。在这种情况下，必须进行抛出以使链条可以继续。由其他用户决定如何处理。例如，您可以在其他地方订阅此结果，他们可能希望以不同的方式处理错误。
— Sonic Soul
我现在知道了。那句话使我感到困惑。但是我现在看到了它的好处。感谢
— Vic
4

服务 ：

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) }
)
— 巴拉克斯
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.