【TypeScript】如何在TypeScript中使用async/await,让你的代码更像C#。
【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#中提供全面的支持库,使用的时候,可能还是得酌情处理。
【TypeScript】如何在TypeScript中使用async/await,让你的代码更像C#。的更多相关文章
- [C#] .NET4.0中使用4.5中的 async/await 功能实现异
好东西需要分享 原文出自:http://www.itnose.net/detail/6091186.html 在.NET Framework 4.5中添加了新的异步操作库,但是在.NET Framew ...
- 在Silverlight中使用async/await
现在 async/await 大行其道,确实,有了 async/await ,异步编程真是简单多了,个人觉得 async/await 的出现,给开发者还来的方便,绝不亚于当年 linq 的出现. 但要 ...
- 在现有代码中通过async/await实现并行
在现有代码中通过async/await实现并行 一项新技术或者一个新特性,只有你用它解决实际问题后,才能真正体会到它的魅力,真正理解它.也期待大家能够多分享解一些解决实际问题的内容. 在我们遭遇“黑色 ...
- [C#] .NET4.0中使用4.5中的 async/await 功能实现异步
在.NET Framework 4.5中添加了新的异步操作库,但是在.NET Framework 4.0中却无法使用.这时不免面临着抉择,到底是升级整个解决方案还是不使用呢? 如果你的软件还没发布出去 ...
- js循环中使用async/await踩过的坑
最近写koa的时候遇见需要在循环中使用async/await的情况,当然第一反应就是直接上forEach,然后就直接翻车了... 直接上代码: function handleSql(val) { re ...
- 理解ES7中的async/await
理解ES7中的async/await 优势是:就是解决多层异步回调的嵌套 从字面上理解 async/await, async是 "异步"的含义,await可以认为是 async w ...
- 浅谈C#中的 async await 以及对线程相关知识的复习
C#5.0以后新增了一个语法糖,那就是异步方法async await,之前对线程,进程方面的知识有过较为深入的学习,大概知道这个概念,我的项目中实际用到C#异步编程的场景比较少,就算要用到一般也感觉T ...
- js中的async await
JavaScript 中的 async/await 是属于比较新的知识,在ES7中被提案在列,然而我们强大的babel粑粑已经对它进行列支持! 如果开发中使用了babel转码,那么就放心大胆的用吧. ...
- .NET4.0中使用4.5中的 async/await 功能实现异步
在.NET Framework 4.5中添加了新的异步操作库,但是在.NET Framework 4.0中却无法使用.这时不免面临着抉择,到底是升级整个解决方案还是不使用呢? 如果你的软件还没发布出去 ...
随机推荐
- 让padding、border等不占据宽度
box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* S ...
- Asp.Net MVC4入门指南(10):第三方控件Studio for ASP.NET Wijmo MVC4 工具应用
ComponentOne Studio for ASP.NET Wijmo最新版本2013V1支持MVC4,其中包括: 新增 MVC 4 工程模板 (C# & VB) 开箱即用的MVC 4 工 ...
- C#高级--通过类来理解学习委托
namespace classanddelegate { class Program { static void Main(string[] args) { //这是类的实例化 Test test = ...
- Laravel 学习笔记 —— 神奇的服务容器 [转]
容器,字面上理解就是装东西的东西.常见的变量.对象属性等都可以算是容器.一个容器能够装什么,全部取决于你对该容器的定义.当然,有这样一种容器,它存放的不是文本.数值,而是对象.对象的描述(类.接口)或 ...
- 说说Statement、PreparedStatement和CallableStatement的异同(转)
1.Statement.PreparedStatement和CallableStatement都是接口(interface). 2.Statement继承自Wrapper.PreparedStatem ...
- RSpec shared examples with template methods
It’s pretty common to have multiple tests that are nearly the same. In one app, we support bidding o ...
- delphi XE5皮肤的使用
做皮肤其实是项浩大的工程,从美工设计.到贴图.到程序设计,都非常的麻烦,如果不是一个非常成熟的产品且有很大的用户群体,并且公司具有相当实力,一般都不会去自己做皮肤,毕竟涉及的东西太多,一旦出现问题 ...
- MVC 3 IIS7.5 网站发布及IIS配置文件问题处理
1.环境配置 1) IIS7.5 2)VS2010 完整版 2.配置internet信息服务功能,直接上图,简洁明了. 3.打开VS2010 ,网站发布, 4.IIS网站设置 添加网站, 5-在浏览器 ...
- Java 第8章 循环结构进阶
循环结构进阶 什么是二重循环? 二重循环的执行顺序是什么?
- 谁动了我的特征?——sklearn特征转换行为全记录
目录 1 为什么要记录特征转换行为?2 有哪些特征转换的方式?3 特征转换的组合4 sklearn源码分析 4.1 一对一映射 4.2 一对多映射 4.3 多对多映射5 实践6 总结7 参考资料 1 ...