【TypeScript】如何在TypeScript中使用async/await，让你的代码更像C#。
async/await
提到这个东西，大家应该都很熟悉。最出名的可能就是C#中的，但也有其它语言也实现。比如，Python 3.5中、比如Js中的yield/generator。
Typescript 当前版本1.8.x，1.7版本开始支持async/await, 当然只支持es6编译。2.1版本说是将支持到es5/es3.
Typescript Roadmap : https://github.com/Microsoft/TypeScript/wiki/Roadmap
优点
在这种方式之前，我们主要用的方式，就是回调方式。但如果，你的当前这个调用依赖于回调的数据，当这种关系依赖的多些时候，想想你的代码。
有了 async/await的方式，可以让异步的调用，用起来像同步一样。
场景
想一下这样的场景,有三个http请求，每一个都要依赖上一个请求的返回结果。
我们用js在node中，模拟一下这样的场景。
let http = require('http');
function test() {
http.get('http://www.baidu.com', function (res) {
console.log('the first Status :' + res.statusCode);
http.get('http://www.163.com', function (res2) {
console.log('the second Status :' + res2.statusCode);
http.get('http://www.sina.com', function (res3) {
console.log('the third Status :' + res3.statusCode);
})
})
});
}
test();
我们再来看一下 Typescript 中，用 async/await 的方式。
import http = require('http');
class httpAsync {
constructor() {
}
public async GetAsync(url: string): Promise<http.IncomingMessage> {
var promise = new Promise<http.IncomingMessage>(resolve => {
http.get(url, res => {
resolve(res);
});
});
return promise;
}
}
async function test() {
let ha = new httpAsync();
let res = await ha.GetAsync("http://www.baidu.com");
console.log('the first Status :' + res.statusCode);
res = await ha.GetAsync("http://www.163.com");
console.log('the first Status :' + res.statusCode);
res = await ha.GetAsync("http://www.sina.com");
console.log('the first Status :' + res.statusCode);
}
test();
我们封装了一个httpAsync类，用async方式包装了一下，
对比一个 两个test方法内容，你觉得哪种方式更舒服一些。
如何实现
对C#熟悉的同学，可能很好的理解，因为Promise很像C#中的TaskCompletionSource<T>.
我们来一段 C# 模拟实现这个功能的， C#中的HttpClient本身是支持async/await模式的，大家不要纠结这个，这里只是模拟这个方式 .
public class HttpAsync
{
public Task<HttpResponseMessage> GetAsync(string url)
{
TaskCompletionSource<HttpResponseMessage> tcs = new TaskCompletionSource<HttpResponseMessage>();
HttpClient hc = new HttpClient();
hc.GetAsync(url).ContinueWith(res =>
{
tcs.SetResult(res.Result);
hc.Dispose();
});
return tcs.Task;
}
}
对 C# 这方面感兴趣的同学，可以去查查，网上的资料很多。
Typescript 实现这种方式，主要是一个关键字 async 和一个对象 Promise<T> .
import http = require('http');
class httpAsync {
constructor() {
}
public async GetAsync(url: string): Promise<http.IncomingMessage> {
var promise = new Promise<http.IncomingMessage>(resolve => {
http.get(url, res => {
resolve(res);
});
});
return promise;
}
}
- 方法必须用 async 来标记。
- 可以被 await 的方法必须有返回值 Promise<T> ,如果你的返回值是 void ，那么方法的返回值就是 Promise<void> .
- 用 Promise<T> 包装你的调用，当成功时调用__resolve__ 回调 结果 或 Promise<T> ，来确定你的异步完成。
- 可以在 Promise 构造中，再追加一个 reject 参数，来返回执行过程中的原因或错误。
- Typescript 最终也会把 async/await 的方式编译成 js 中类似 yield/generator 的方式
总结
看看 C# 和 Typescript 的代码，看起来很还是很像的吧。因为他们的老爹都是一个人， C# 之父也是 Typescript 他爹。
在C#中，我们可能已很熟悉这种方式了，但是在 js/ts 中，我们使用的还不多，而且它也不像C#中提供全面的支持库，使用的时候，可能还是得酌情处理。