Cách triển khai mẫu không đồng bộ của Typescript chờ đợi: Lời hứa

Question

Tôi đang học về góc cạnh và Bản ghi loại.

Tôi có dịch vụ CustomerService trong dịch vụ này Tôi có phương pháp mà tôi muốn trả về một mảng khách hàng từ một dịch vụ RESTfull.

Ban đầu tôi đã tạo GetCustomers chức năng của tôi như sau:

public GetCustomers(): Dtos.ICustomer[] { 

     var _customers: Dtos.ICustomer[]; 
     this._httpService.get('http://localhost/myTestApi/api/customers/') 
      .success(function (data) { 

       _customers = data as Dtos.ICustomer[]; 
      }).error(function (error) { 
       console.log(error); 
      }); 
     return _customers; 
    } 

Chức năng này cuối cùng được khách hàng nhưng rõ ràng nó sẽ trở lại _customers trước HTTPService thực sự nhận được dữ liệu.

Tại thời điểm này tôi nghĩ rằng tôi có thể sử dụng Typscript async/await và đây là khi tôi kết thúc trong một mớ hỗn độn.

Tôi muốn viết chức năng của tôi như thế này:

public async GetCustomers(): Dtos.ICustomer[] { 

     var _customers: Dtos.ICustomer[]; 
     await this._httpService.get('http://localhost/myTestApi/api/customers/') 
      .success(function (data) { 

       _customers = data as Dtos.ICustomer[]; 
      }).error(function (error) { 
       console.log(error); 
      }); 
     return _customers; 
    } 

tôi ngay lập tức nhận được lỗi này: Lỗi Loại TS1055 'Dtos.ICustomer []' không phải là một loại async hàm trả về giá trị.

Tôi thấy điều này Async/Await , simple example (typescript)

tuy nhiên nó sử dụng một đối tượng Promise: return mới Promise

Nếu tôi cố gắng viết lại phương pháp chữ ký GetCustomers của tôi như sau:

public async GetCustomers(): Promise<Dtos.ICustomer[]> {} 

tôi nhận được và không bị lỗi :

Không thể tìm thấy tên 'Hứa hẹn'

Tôi có cần phải nhập một cái gì đó để có được một Promise?

Answer 1

tôi sẽ khuyên bạn nên nhìn vào góc $ q Promise Object: https://docs.angularjs.org/api/ng/service/ $ q

Nó xử lý những gì bạn cần cho lời hứa.

public getCustomers(): ng.IPromise<Dtos.ICustomer[]> { 
     var lDefer: ng.IDeferred<Dtos.ICustomer[]> = 
      this.$q.defer<Dtos.ICustomer[]>(); 

     this._httpService.get('http://localhost/myTestApi/api/customers/') 
      .then((inResult: any) => { 
       let lResultList: Dtos.ICustomer[] = inResult.data; 
       lDefer.resolve(lResultList); 
      }, 
      (inError: any) => { 
       lDefer.reject(inError); 
      }); 

     return lDefer.promise; 
    } 

Hãy chắc chắn để tiêm $ q đối tượng trong điều khiển của bạn:

import IPromise = angular.IPromise; 
import IDeferred = angular.IDeferred; 

static $inject = ['$q', ...]; 

constructor(protected $q:angular.IQService, ...) { 
    super($q); 
} 

T.B. - Có một tập tin gõ có sẵn từ Chắc chắn Typed: http://definitelytyped.org/

Bạn có thể cài đặt định nghĩa 'q' nguyên cảo qua TSD (Bây giờ Deprecated) hoặc typings

Answer 2

trong tập tin tsconfig.json của bạn, dưới compilerOptions:

bạn cần phải thêm:

"lib": ["dom", "dom.iterable", "scripthost","es2015.promise", "es2015"]

Tôi sử dụng mục tiêu es2015 nhưng lib cũng tồn tại cho các mục tiêu khác. trong vscode, bạn sẽ có intellisense.