如何使用 TypeScript 在控制器中处理 Angular promise

Question

我有一个请求某些数据的服务：

/// <reference path="../../typings/reference.ts" />

module app {
'use strict';

export class VehicleMakeService {

    static $inject = ['$http'];
    constructor(private $http: ng.IHttpService) {}

    getVehicles(): ng.IPromise<any> {

        return this.$http.get('https://api.edmunds.com/api/vehicle/v2/makes?state=used&year=2015&view=basic&fmt=json')
        .then(function(response) {
            return response.data;
        });
    }
}

angular.module('app').service('VehicleMakeService', VehicleMakeService);
}

这按预期工作，但是当我尝试检索控制器中的数据时，我得到 'Promise {$$state: object}'。

这是控制器：

/// <reference path="../../typings/reference.ts" />

module app {
'use strict';

interface ISearchController {
    vehicles: any;
    setVehicles(): void;
}

class SearchController implements ISearchController {

    vehicles: any;

    static $inject = ['VehicleMakeService'];
    constructor(private vehicleMakeService: VehicleMakeService) {
        this.vehicles = {};
        this.setVehicles();     
    }

    setVehicles(): void {
        this.vehicles = this.vehicleMakeService.getVehicles();
        console.log(this.vehicles); 
    }
}
angular.module('app').controller('SearchController', SearchController);
}

我尝试在控制器中解决它：

setVehicles(): void {
        this.vehicleMakeService.getVehicles().then(function(data) {
            this.vehicles = data;
            console.log(this.vehicles);
        });
    }

但随后我得到“类型错误：无法设置未定义的属性 'vehicles'”。

我通常在模块配置的解析函数中处理这种事情，但这次我不能。

Answer 1

自从 getVehicles 方法 returns promise 对象以来，您需要正确使用它并且永远不要忘记 HTTP 请求的异步性。 then 中回调的上下文也会不同，因此您还需要考虑它，例如使用 bind 方法：

setVehicles(): void {
    this.vehicleMakeService.getVehicles().then(function(data) {
        this.vehicles = data;
        console.log(this.vehicles);
    }.bind(this));
}

Answer 2

您还可以使用 TS/ES6 中的箭头函数像这样：

setVehicles(): void {
    this.vehicleMakeService.getVehicles().then((data) => {
        this.vehicles = data;
        console.log(this.vehicles);
    });
}

顺便说一句。你不应该在 TS 中使用内部模块，它太糟糕了 ;)

您可以使用外部模块 Angular 1.x 和 TypeScript here.

检查我的示例框架应用程序

如何使用 TypeScript 在控制器中处理 Angular promise

How can I handle an Angular promise in the controller using TypeScript

angularjs

http

angular-promise

resolve

typescript1.4