[英]How to implement Typescript async await pattern: Where is the Promise
I'm learning angular and Typescript. 我正在学习角度和打字稿。
I have a CustomerService an in this service I Have a method which I wish to return an array of customers from a RESTfull service. 我在这个服务中有一个CustomerService我有一个方法,我希望从RESTfull服务返回一组客户。
Initially I created my GetCustomers function thus: 最初我创建了我的GetCustomers函数:
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;
}
This function eventually gets the customers but obviously it will return _customers before the httpservice actually gets the data. 这个函数最终得到了客户,但显然它会在httpservice实际获取数据之前返回_customers。
At this point I thought I could make use of Typscript async/await and this is when I end in a mess. 此时我想我可以使用Typscript async / await,这就是我在一团糟中结束的时候。
I wanted to write my function like this: 我想写这样的函数:
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;
}
I immediately get this error: Error TS1055 Type 'Dtos.ICustomer[]' is not a valid async function return type. 我立即得到此错误:错误TS1055类型'Dtos.ICustomer []'不是有效的异步函数返回类型。
I found this Async/Await , simple example (typescript) 我找到了这个Async / Await,简单的例子(typescript)
however it uses an Promise object: return new Promise 但它使用Promise对象:返回新的Promise
If I attempt to re-write my GetCustomers method signature thus: 如果我尝试重写我的GetCustomers方法签名:
public async GetCustomers(): Promise<Dtos.ICustomer[]> {}
I get and error: 我得到并且错误:
Cannot find name 'Promise' 找不到名字'承诺'
Do I need to import something to get a Promise? 我需要导入一些东西来获得承诺吗?
I would reccomend looking at the Angular $q Promise Object: https://docs.angularjs.org/api/ng/service/ $q 我建议看一下Angular $ q Promise对象: https : //docs.angularjs.org/api/ng/service/ $ q
It handles what you need for the promise. 它处理您承诺所需的内容。
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;
}
Make sure to inject the $q object in your controller: 确保在控制器中注入$ q对象:
import IPromise = angular.IPromise;
import IDeferred = angular.IDeferred;
static $inject = ['$q', ...];
constructor( protected $q:angular.IQService, ... ) {
super( $q );
}
PS - There is a typing file available from Definitely Typed: http://definitelytyped.org/ PS - 有一个可以从Definitely Typed获得的输入文件: http : //definitelytyped.org/
You can install 'q' Typescript definition via tsd (Now Deprecated) or typings 您可以安装“Q”打字稿定义通过TSD(现在已过时)或分型
in your tsconfig.json
file, under compilerOptions
: 在您的
tsconfig.json
文件中,在compilerOptions
下:
you need to add: 你需要添加:
"lib": ["dom", "dom.iterable", "scripthost",
"es2015.promise"
, "es2015"]
"lib": ["dom", "dom.iterable", "scripthost",
"es2015.promise"
, "es2015"]
I use es2015 target, but the lib exists for other targets too. 我使用es2015目标,但lib也适用于其他目标。 in vscode, you'll have intellisense.
在vscode中,你将有智能感知。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.