angular 5 安慰 http toPromise() 请求 returns 未定义

Question

我在 angular 5 中调用一个 api 端点，使用 Http 导入来填充 select 下拉列表，但是当我将它登录到控制台时我变得不确定，并且下拉列表确实如此不填充任何数据...它意味着项目类别。

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 没有任何好处

保持服务返回可观察值：

//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。因此，在发出值（在可观察的情况下）或解决（承诺）之前，您只有正确的结果。

angular 5 安慰 http toPromise() 请求 returns 未定义

angular 5 consoling http toPromise() request returns undefined

javascript

angular-http

angular

angular5