为什么在Ionic 4中无法从API服务返回数据？

Question

I'm upgrading from Ionic 3 to 4 and keep encountering problems with my API services. In this particular instance I'm trying to retrieve a user's tickets so that I may list them.

Unfortunately, every time I do this I get the 'whoops' error message, even if the tickets are successfully fetched from the API. On top of that I can't seem to figure out how to successfully get the tickets returned from the service into my page; I'm currently getting a Cannot read property 'then' of undefined error.

On top of that, the data is now coming back as data: [object Object],[object Object]

ticket.service

getSubmittedTickets() {
    let body = new FormData();
    body.append('username', this.username);
    body.append('password', this.password);
    this.http
        .post(this.apiService.url, body)
        .subscribe((data: any) => {
            console.log('data: ' + data);
            return data;
        }, error => {
            console.log('whoops');
        });
}

ticket.ts

ngOnInit() {
    this.getSubmittedTickets();
}

getSubmittedTickets() {
    this.ticketService.getSubmittedTickets()
    .then(data => {
        this.tickets = data;
        console.log('tickets: '+this.tickets);
    });
}

Answer 1

The method name in your service is getTickets() . But in your TS file, you have used getSubmittedTickets() .

The code in your TS file should be:

getSubmittedTickets() {
    this.ticketService.getTickets()
    .then(data => {
        this.tickets = data;
        console.log('tickets: '+this.tickets);
    });
}

Answer 2

you need to convert the observable to promise with toPromise

getSubmittedTickets() {
    let body = new FormData();
    body.append('username', this.username);
    body.append('password', this.password);
    return this.http
        .post(this.apiService.url, body)
        .toPromise()
}

Answer 3

The service should return an Observable

getSubmittedTickets() {
    let body = new FormData();
    body.append('username', this.username);
    body.append('password', this.password);
    return this.http.post(this.apiService.url, body);      
}

and the component calls the method from the service and then subscribe to the returned value

getSubmittedTickets() {
    this.ticketService.getSubmittedTickets()
    .subscribe(data => {
        this.tickets = data;
        console.log('tickets: '+this.tickets);
    });
}