Angular-从Promise同步获取

Question

我想打印产品的历史记录。 我在ActivatedRoute.params中有一个产品ID。 在ngOnInit方法中，我必须获取产品的所有历史记录并分配给变量。 然后，我想将产品映射到productHistory，因为我想要具有历史记录的最新版本。 但是问题在于获取历史记录。 获取历史记录的方法返回Promise，当我使用此属性且未定义时，我无法获得productHistory的长度。 从服务加载后如何获得此属性？

我想在执行getHistory（）之后执行方法。

我的代码：

ProductService.ts：

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

import 'rxjs/add/operator/toPromise';

// rest imports

@Injectable()
export class ProductService {

    // URL to web api
    private projectsUrl = 'http://localhost:8080/products';

    private headers = new Headers({'Content-Type': 'application/json'});

    constructor(private http: Http) {}

    getHistory(id: number): Promise<ProductHistory[]> {
        const url = `${this.projectsUrl}/projectId/${id}`;
        return this.http.get(url)
            .toPromise()
            .then(response => response.json() as ProductHistory[])
            .catch(this.handleError);
    }

    handleError() {
        //...
        // implementation is irrelevant
    }
}

ProductHistoryComponent.ts：

import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Location } from '@angular/common';

import { ProductService } from './product.service';

import { ProductHistory } from './product-history';
import { Product } from './model/product';

import 'rxjs/add/operator/switchMap';

@Component({
    selector: 'product-history',
    templateUrl: './product-history.component.html',
    styleUrls: [ './product-history.component.css' ]
})
export class ProductHistoryComponent implements OnInit {

    auditProducts: ProductHistory[] = new Array<ProductHistory[]>();    
    selectedProduct: ProductHistory;

    constructor(
        private route: ActivatedRoute,
        private location: Location,
        private productService: ProductService
    ) {}

    ngOnInit(): void {
        let id: number = this.route.snapshot.params['id'];

        this.productService.getHistory(id)
            .then(history => this.historyProducts = history);

        this.productService.getProduct(id)
            .then(product => {
                let lastVersion: ProductHistory = this.createLastVersion(product);
                this.auditProducts.push(lastVersion);
            });
    }

    onSelect(ProductHistory: ProductHistory): void {
        this.selectedProduct = ProductHistory;
        this.compare(this.selectedProduct);
    }

    goBack(): void {
        this.location.back();
    }

    compare(history: ProductHistory): void {
        let previous: ProductHistory;
        if (history.changeNumber != null && history.changeNumber > 1) {
            previous = this.historyProducts[history.changeNumber - 2];
            if (typeof previous != 'undefined') {
                this.setPreviousDiffsFalse(previous);
                if (previous.name !== history.name) {
                    history.nameDiff = true;
                }
                if (previous.price !== history.price) {
                    history.priceDiff = true;
                }
            }
        }
    }

    createLastVersion(product: Product): ProductHistory {
        let lastVersionProduct: ProductHistory = new ProductHistory();
        lastVersionProduct.id = this.historyProducts.length + 1;
        lastVersionProduct.name = product.name;
        lastVersionProduct.price = product.price;
        lastVersionProduct.changeNumber = this.historyProducts[this.historyProducts.length - 1].changeNumber + 1;
        return lastVersionProduct;
    }

    setPreviousDiffsFalse(previous: ProductHistory): void {
        previous.nameDiff = false;
        previous.priceDiff = false;
    }

}

Answer 1

我建议使用observables代替promise ...但是要回答您的问题，您只需要在收到第一个请求后执行第二个请求即可。 像这样：

ngOnInit(): void {
    let id: number = this.route.snapshot.params['id'];

    this.productService.getHistory(id)
        .then(history => {
               this.historyProducts = history);

               this.productService.getProduct(id)
                     .then(product => {
                         let lastVersion: ProductHistory = this.createLastVersion(product);
                         this.auditProducts.push(lastVersion);
        });
     }
}

我刚搬到内 ，则第一个请求的第二请求。 注意：我没有语法检查此。

Answer 2

您不能同步运行它，您必须等待每个promise返回一个结果，然后才能对该结果执行某些操作。 通常的方法是在使用promise时将代码嵌套在then块中。 另外，您也可以将async/await与最新版本的Typescript一起使用，并且只需要更改component代码，因为您已经从服务中返回Promise类型。 尽管发出的javascript代码仍将使用函数/回调嵌套，这使代码更易于阅读（IMO）（ 除非我相信您以es7为目标，否则也许有人会对此进行纠正或确认 ）。

// note the use of async and await which gives the appearance of synchronous execution
async ngOnInit() {
    let id: number = this.route.snapshot.params['id'];

    const history = await this.productService.getHistory(id);
    this.historyProducts = history;

    const product = await this.productService.getProduct(id);
    let lastVersion: ProductHistory = this.createLastVersion(product);
    this.auditProducts.push(lastVersion);
}