角 Http 不工作。 Promise 与 Observable 方法相结合答案

【问题标题】：Angular Http Not working. Promise mixed with Observable approach角 Http 不工作。 Promise 与 Observable 方法相结合
【发布时间】：2017-02-27 18:37:30
【问题描述】：

我正在尝试将数据从 Angular 发布到后端 Node js 文件。表单提交后调用以下函数：

cmdSubmit() : void 
{
       console.log(this.cli);
       this.Cliservice.postdata(this.cli)
                      .then(clidata  => this.clidata.push(clidata),
                            error =>  this.errorMessage = <any>error);

}

postdata函数代码：

postdata(obj: any): Promise<any> {
    alert('hello');
    let body = JSON.stringify({ obj });
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post(this.runUrl, body, options)
                    .map(this.extractData)
                    .catch(this.handleError);

    /*return this.http.post(this.runUrl, body, options)
                      .map(this.extractData)
                      .catch(res => {
             // do something

             // To throw another error, use Observable.throw
             return Observable.throw(res.json());
      });*/


    }

    private extractData(res: Response) {
       let body = res.json();
       return body.data || { };
    }

private handleError (error: any) {
    // In a real world app, we might use a remote logging infrastructure
    // We'd also dig deeper into the error to get a better message
    let errMsg = (error.message) ? error.message :
                  error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
 }

}

但是这里什么都没有发生。我没有收到任何错误消息。您能就此提出建议吗？

【问题讨论】：

标签： angular typescript http angular2-services

【解决方案1】：

每个返回Observable 的Http 函数都必须附加一个.subscribe() 方法。当您错过此方法时，请求将不会执行。所以给每个函数附加.subscribe()方法。

正如 cmets 中所说，您使用两种方法：Promise style 和 Observable style，因此我建议您使用一种常见的样式。

this.http.post(this.runUrl, body, options)
         .map(this.extractData).subscribe(/*here your parameters*/);

【讨论】：

他还混淆了Observable 和Promise，但没有转换为Promise。
@rinukkusu 是的，他需要使用通用的样式
只是告诉你，这样你就可以稍微改进你的答案来解决他所有的错误:)

【解决方案2】：

@Suren 提到的完全正确。作为替代方案，您也可以在 this 上使用 toPromise() 方法直接将其转换为 Promise 对象：

return this.http.post(this.runUrl, body, options).toPromise();

为此，您需要导入以下内容

import 'rxjs/add/operator/toPromise'

【讨论】：