TypeScript - http.get（）。subscribe（） - ＆gt;没有设置变量

Question

我正在尝试创建一个service.ts文件，该文件将处理TypeScript中的所有Http请求（AngularJs2）。

现在我得到了正确的响应，但是我无法访问subscribe（）函数之外的属性。让我告诉你我的意思。

APICaller.service.ts

import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http';

import { Evenement } from './models/evenement.model';
import { Deelnemer } from './models/deelnemer.model';
import { Comment } from './models/comment.model';

@Injectable()
export class APICaller {
    http : Http
    baseUrl:string = "http://10.0.4.161:8080";

    constructor(@Inject(Http) httpService) {
        this.http = httpService;
    }

    addNewComment(deelnemerId:number, eventId:number, content:string) : Comment{
        let results:Comment = {id: 0, content:"", user: "", status: "", date: ""};

        this.http.post(this.baseUrl+"/evenementen/"
        +eventId +"/deelnemers/"+deelnemerId+"/addComment"
        ,{
            user: 'developer',
            content: content
        }).subscribe((response) => {
            results = response.json();
            console.log("results id: "+ results.id);
        });

        return results;
    }
}

component.ts :(最小化 - 仍需要清洁）

import { APICaller } from '../../apicaller.service';
import { Comment } from '../../models/comment.model';

@Component({    
    templateUrl: 'build/pages/deelnemer-details/deelnemer-details.html',
    providers: [APICaller]
})

export class DeelnemerDetails {   
    public deelnemer:any;
    public http:Http;
    public eventObj;
    public newComment;
    public comments;
    public editComment:any;


    constructor(private apiCaller : APICaller, private navCtrl: NavController, navParams : NavParams,  public toastCtrl : ToastController, public alertCtrl:AlertController, @Inject(Http) httpService) {
        this.eventObj = navParams.get("event");
        this.http = httpService;
        this.newComment = "";
        this.deelnemer={};
        this.editComment={
        id: -1,
        edit: false,
        content: ""
    }

        this.getDeelnemer(navParams.get("deelnemer"));
    }

    addNewComment(){
        let test:Comment = {id: 0, content:"", user: "", status: "", date: ""};

        console.log("deelnemer id "+this.deelnemer.id);
        console.log("eventObj id "+ this.eventObj.id);
        console.log("new comment : "+this.newComment);

        test = this.apiCaller.addNewComment(this.deelnemer.id, this.eventObj.id, this.newComment);

        console.log("new comment id: "+ test.id);

        this.comments.push(
           test
        );
        this.newComment="";

    }

回复和console.log()

所以似乎在.subscribe()范围内，它没有设置results的值。

Answer 1

当服务器的响应到达时，调用传递给subscribe(...)的回调很久。在启动对服务器的调用后立即调用return results;。

如果您将代码更改为

@Injectable()
export class APICaller {
    http : Http
    baseUrl:string = "http://10.0.4.161:8080";

    constructor(@Inject(Http) httpService) {
        this.http = httpService;
    }

    addNewComment(deelnemerId:number, eventId:number, content:string) : Observable<Comment>{
        let results:Comment = {id: 0, content:"", user: "", status: "", date: ""};

        return this.http.post(this.baseUrl+"/evenementen/"
        +eventId +"/deelnemers/"+deelnemerId+"/addComment"
        ,{
            user: 'developer',
            content: content
        }).map((response) => {
            console.log("results id: "+ results.id);
            return response.json();
        });
    }
}

您可以通过调用

来获得结果

addNewComment(){
    let test:Comment = {id: 0, content:"", user: "", status: "", date: ""};

    console.log("deelnemer id "+this.deelnemer.id);
    console.log("eventObj id "+ this.eventObj.id);
    console.log("new comment : "+this.newComment);

    this.apiCaller.addNewComment(this.deelnemer.id, this.eventObj.id, this.newComment).subscribe(test => {

      console.log("new comment id: "+ test.id);

      this.comments.push(
         test
      );
      this.newComment="";
    });

   // code here (outside the callback passed to `subscribe(...)`) is again
   // executed before `result` arrives

}

异步执行具有传染性，一旦启动异步执行，就无法返回同步执行。

我将subscribe()更改为map()，因为.map()返回了Observable，可以由来电者订阅。 .subscribe()会返回Subscription，在这种情况下对来电者来说毫无价值。

Answer 2

由于http请求是异步的，因此您无法返回结果，因为在达到return语句时尚未收到该结果。

您可以使用回调：

addNewComment(deelnemerId: number, eventId: number, content: string, callback: (comment: Comment) => void): void {
    let results:Comment = {id: 0, content:"", user: "", status: "", date: ""};

    this.http.post(`${ this.baseUrl }/evenementen/"${ eventId }/deelnemers/${ deelnemerId }/addComment`, {
        user: 'developer',
        content: content
    }).subscribe((response) => {
        console.log("results id: " + results.id);
        callback(response.json());
    });
}

然后：

this.apiCaller.addNewComment(this.deelnemer.id, this.eventObj.id, this.newComment, (comment: Comment) => {
    console.log("new comment id: " + comment.id);

    this.comments.push(
       comment
    );

    this.newComment = "";
});

或承诺：

addNewComment(deelnemerId:number, eventId:number, content:string): Promise<Comment> {
    let results:Comment = {id: 0, content:"", user: "", status: "", date: ""};

    this.http.post(`${ this.baseUrl }/evenementen/"${ eventId }/deelnemers/${ deelnemerId }/addComment`, {
        user: 'developer',
        content: content
    }).map((response) => {
        console.log("results id: " + results.id);
        return response.json();
    }).toPromise();
}

然后：

this.apiCaller.addNewComment(this.deelnemer.id, this.eventObj.id, this.newComment).then((comment: Comment) => {
    console.log("new comment id: " + comment.id);

    this.comments.push(
       comment
    );

    this.newComment = "";
});