如何在Angular2中对成功的HTTP请求使用回调函数答案

【问题标题】：How to use Callback function on successful HTTP request in Angular2如何在Angular2中对成功的HTTP请求使用回调函数
【发布时间】：2016-10-14 09:24:44
【问题描述】：

我是 Angular2 的新手。我参考了官方网站上给出的英雄教程，并根据我的要求在 Angular2 中为 HTTP 发布请求编写了以下代码。我习惯了 java 脚本，我使用 AJAX 调用与 Web 服务器交互，在 javascript-AJAX 调用中，我们可以在成功的 AJAX 调用（回调函数）上执行一些功能。我如何在 angular2 中实现这一点？我也想使用警报。每次通话成功/失败时，都会显示一个提示框，说明其成功或失败。

@Injectable()
export class LicenceService {
constructor(private http: Http) {}
private headers = new Headers({'Content-Type': 'application/json'});
/* URL to web api*/
private licenceUrl = 'http://localhost:5000/***/****/installation/uploadLicense';  



sendData(key: string){
    return this.http
        .post(this.licenceUrl, key, this.headers)
        .toPromise()
        .then(res => res.json().data)
        .catch(this.handleError);
}
private static handleError (error: any) {
    console.log(error);
    return Promise.reject(error.json());
}

【问题讨论】：

标签： angular angular2-services

【解决方案1】：

所有你需要的都已经在你的代码中了

sendData(key: string){
    return this.http
        .post(this.licenceUrl, key, this.headers)
        .toPromise()
        .then(res => {
           res.json().data;
           // code here is executed on success
         })
        .catch(this.handleError);
}

或为调用者

this.sendData(somekey).then(result => /*put after after success code here */);

【讨论】：

谢谢。这很有帮助。我详细阅读并再次阅读了 Angular 文档，并弄清楚了我的疑问。服务和 HTTP 部分解决了我的问题。

【解决方案2】：

虽然，您的问题已经得到解答，但这是另一种将服务和回调逻辑分开的方法。我通过使用 subscibe 和 Observable

实现了它

这是我的question.compnent.ts

    ngOnInit() {
               this.getQuestions();
    }        
    getQuestions() {
        this.yourService.getQuestions()
            .subscribe(
            data => this.displayData = data,
            error => this.errorMessage = <any>error,
            () => { 
                  //this gets called on completion, callback code comes here
                  } 
            );
    }

还有我的 question.service.ts 负责 HTTP 请求部分

   getQuestions(): Observable<DisplayData[]>{
      const endPoint = 'http://localhost:3000/yourApi';
      return this.http.get(endPoint).map((response: Response) => response.json());
}

注意：this.displayData是一个DisplayData[]类型的变量，在Service中用作observable。

抱歉，帖子太长了。干杯:)

【讨论】：