http服务中的Angular2 Observable按字符返回错误答案

【问题标题】：Angular2 Observable in http service returning errors char by charhttp服务中的Angular2 Observable按字符返回错误
【发布时间】：2017-03-07 06:07:51
【问题描述】：

我正在为我的全栈应用程序构建一个 angular2 前端。我正在处理用户登录，我有这个在提交登录表单时调用的函数：

onSubmit(email, password) {
    this.userService.login(this.user.email, this.user.password).subscribe((result) => {
        console.log('reps' + result)
        if (result) {
            this.router.navigate(['']);
        }
    });
}

我的userService中的登录功能如下：

login(_email, _password) {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    let data = { email: _email, password: _password };
    console.log(data);
    return this.http.post('/api/login', data, options)
        .map(this.extractData)
        .map((res) => {
            console.log('res' + JSON.stringify(res))
            if (res.token) {
                localStorage.setItem('auth_token', res.token);
                this.loggedIn = true;
            }
            return true;
        }).catch(this.handleError);
}

最后是handleError函数：

private handleError(error: Response | any) {
    // In a real world app, we might use a remote logging infrastructure
    console.log('isinError Handler' + error);
    let errMsg: string;
    if (error instanceof Response) {
        const err = error || JSON.stringify(error);
        console.log('err' + err); // Prints out "Response with status: 401 Unauthorized for URL: http://localhost:3000/api/login"
        errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
        errMsg = error.message ? error.message : error.toString();
    }
    console.error('msg' + errMsg); // Prints out "401 - Unauthorized Response with status: 401 Unauthorized for URL: http://localhost:3000/api/login"
    return errMsg;
}

当我提交错误的密码时，我得到了错误：

401 - 未经授权的响应，状态为：401 未经授权的 URL：http://localhost:3000/api/login

从我的错误处理程序中的errMsg 变量打印。这很好，但是，回到我的组件中，然后我得到resp4,resp0,resp1... 打印出来。即 errMsg char by char。我怎样才能让它以一个完整的字符串返回？

【问题讨论】：

标签： angular typescript rxjs rxjs5 angular2-http

【解决方案1】：

你很可能没有返回 JSON。您可能会使用 String 进行响应，并且它需要 JSON。

在您的响应代码中执行类似的操作..

let json = JSON.parse(str);
res.send(json); // responding with parsed JSON

【讨论】：

【解决方案2】：

Operator catch() 将回调作为参数，该回调必须返回一个新的 Observable，后面的 Observer 将重新订阅并继续。

您从回调中返回的只是一个字符串errMsg，因此您的代码等效于：

Observable.create(obs => {
        obs.next('r1');
        obs.next('r2');
        obs.next('r3');
        obs.error('error');
    })
    .catch(val => val)
    .subscribe(val => console.log(val));

打印到控制台because of subscribeToResult() is used internally:

r1
r2
r3
e
r
r
o
r

观看现场演示：http://plnkr.co/edit/HODmdrNqRrw5ctSICktj?p=preview

如果您想在组件中接收错误，您需要重新抛出错误，然后在 subscribe() 方法上使用 onError 处理程序：

...
.catch(val => {
    throw val;
})
.subscribe(
    val => console.log(val),
    val => console.log('Error:', val)
);

请注意，在 Angular2 中，您使用的是 RxJS 5，其 catch() 方法尚未出现在文档中，因此如果您阅读 RxJS 4 的原始文档，它的行为可能会有所不同。

【讨论】：