角度 5 安慰 http toPromise() 请求返回未定义

Question

我正在使用 Http 导入以 Angular 5 调用 api 端点来填充选择下拉列表，但是当我将它记录到控制台并且下拉列表中没有填充任何数据时，我变得不确定......它意味着是项目类别.

item-category.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import {Router} from '@angular/router';
import { Globals } from '../shared/api';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/toPromise';
declare var $: any;

@Injectable()
export class ItemCategoryService{
    private categoryUrl = this.globals.CATEGORYS_URL;
    constructor(private http: Http, private globals: Globals,  private router:Router) { }

fetchCategories(){
    let v = this.page_header();
    return this.http.get(this.categoryURL, v)
        .toPromise()
        .then(response => response.json())
        .catch(this.handleError);
    };
}

itemCategory.component.ts

fetchCategorys(){
    this.categorySrv.fetchCategories().then(response =>this.categorys = response.results  )
    .catch(error=> this.error = error )
    console.log(this.categorys);   // <== undefined
}

itemCategory.component.html

<select class="form-control" [(ngModel)]="product.category"[formControl]="productForm.controls['productCategory']" require>
    <option *ngFor="let item of categorys" [value]="item.slug">{{item.name}}</option>
</select>

这就是我所拥有的，但未定义的是我在控制台中得到的，下拉列表中没有任何来自 api 的内容，检查也没有显示任何内容......我可能出了什么问题？

Answer 1

这是因为您在返回响应之前记录了this.categorys。

试试

    fetchCategorys(){
        this.categorySrv.fetchCategories().then((response: any) => {  
               this.categorys = response.results; 
               console.log(this.categorys); // Log here instead of outside the promise  
        })
        .catch(error=> this.error = error )
        // Remove this console.log()
        console.log(this.categorys);   // <== It is correct to be undefined here because it is not in the success promise
    }

此外，您需要删除服务的 fetchCategories() 函数中的 .then() 和 .catch() 处理程序。它应该只是 -

fetchCategories(){
    let v = this.page_header();
    return this.http.get(this.categoryURL, v)
        .map(response => response.json())
        .toPromise();
}

无需在服务中消费promise

Answer 2

将 observable 更改为 promise 没有任何好处

让服务返回一个 observable：

//service
fetchCategories(){
    let v = this.page_header();
    return this.http.get(this.categoryURL, v)
    .map(response => response.json())
}

在您的组件中，将其作为可观察对象使用

this.categorySrv.fetchCategories().subscribe( (response: any) => {  
 this.categorys = response.results; 
  console.log(this.categorys); // Log here instead of outside the observable  
}, error=> this.error = error)

记住所有的http请求（比如this.http.get）都是异步的，要么返回observable，要么返回promise。因此，在值已发出（在可观察的情况下）或已解决（承诺）之前，您只有正确的结果。