zoukankan      html  css  js  c++  java
  • 【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#中提供全面的支持库,使用的时候,可能还是得酌情处理。

  • 相关阅读:
    1组Alpha冲刺总结
    1组Beta冲刺4/5
    1组Beta冲刺5/5
    1组Alpha冲刺4/6
    1组Alpha冲刺总结
    1组Beta冲刺2/5
    1组Beta冲刺3/5
    1组Beta冲刺2/5
    1组Alpha冲刺4/6
    1组Alpha冲刺5/6
  • 原文地址:https://www.cnblogs.com/gaoshang212/p/5639773.html
Copyright © 2011-2022 走看看