从C#到TypeScript - Promise

从C#到TypeScript - Promise

背景

相信之前用过JavaScript的朋友都碰到过异步回调地狱(callback hell),N多个回调的嵌套不仅让代码读起来十分困难,维护起来也很不方便。 其实C#在Task出现之前也是有类似场景的,Async Programming Mode时代,用ActionFunc做回调也很流行,不过也是意识到太多的回调嵌套代码可读性差且维护不易,微软引入了Task和Task-based Async Pattern。 虽然不知道是哪个语言最早有这个概念,但相信是C#把async await带到流行语言的舞台,接着其他语言也以不同的形式支持async await,如Python, Dart, Swift等。 JavaScript同样在ES6开始支持PromiseGenerator,并在ES7中提出支持async await的议案。

这篇先来看看Promise:

Promise的特点

Promise之于TypeScript,相当于Task之于C#,只有返回Promise的函数才能使用async awaitPromise其实就是一个可以获取异步结果,并封装了一些异步操作的对象。 有三个状态: pending: 进行中 resolved: 成功 rejected: 失败 并且这三个状态只有两种转换:pending->resolvedpending->rejected,不是成功就是失败,并没有多余的状态转换。 这两种转换都是由异步返回的结果给定的,成功取回数据就是resolved,取数据出异常就是rejected。 也因此,这转换过后的结果就是固定的了,不可能在转换过后还会变回pending或其他状态。 Promise不能在任务进行中取消,只能等结果返回,这点上不如C#的TaskTask可以通过CancelTaskToken来取消任务。

Promise的使用

可以直接new一个Promise对象,构造函数的参数是一个有两个参数的函数。 这两个参数一个是resove,用来在异步操作成功后调用,并把异步结果传出去,调用resove后状态就由pending->resolved。 另一个是reject,用来在失败或异常时调用,并把错误消息传出去,调用reject后状态由pending->rejected

var promise = new Promise(function(resolve, reject) {
    
});

通常需要在成功或失败后做一些操作,这时需要then来做这个事,then可以有两个函数参数,第一个是成功后调用的,第二个是失败调用的,第二个是可选的。 另外,then返回的也是一个Promise,不过不是原来的那个,而是新new出来的,这样可以链式调用,then后面再接then

// 函数参数用lambda表达式写更简洁
promise.then(success => {
    console.info(success);
}, error => {
    console.info(error);
}).then(()=>console.info('finish'));

嵌套的Promise

在实际场景中,我们可能需要在一个异步操作后再接个异步操作,这样就会有Promise的嵌套操作。 下面的代码显示的是Promise的嵌套操作: p1先打印"start",延时两秒打印"p1"。 p2p1完成后延时两秒打印"p2"。

function delay(): Promise<void>{
    return new Promise<void>((resolve, reject)=>{setTimeout(()=>resolve(), 2000)});
}

let p1 = new Promise((resolve, reject) => {
    console.info('start'); 
    delay().then(()=>{
        console.info('p1'); 
        resolve()
    });
});

let p2 = new Promise((resolve, reject) => {
    p1.then(()=>delay().then(()=>resolve()));
});

p2.then(()=>console.info('p2'));

异常处理

上面提到Promise出错时把状态变为rejected并把错误消息传给reject函数,在then里面调用reject函数就可以显示异常。 不过这样写显得不是很友好,Promise还有个catch函数专门用来处理错误异常。 而且Promise的异常是冒泡传递的,最后面写一个catch就可以捕获到前面所有promise可能发生的异常,如果用reject就需要每个都写。 所以reject函数一般就不需要在then里面写,在后面跟个catch就可以了。

new Promise(function(resolve, reject) {
  throw new Error('error');
}).catch(function(error) {
  console.info(error); // Error: error
});

也如上面所说状态只有两种变化且一旦变化就固定下来,所以如果已经在Promise里执行了resolve,再throw异常是没用的,catch不到,因为状态已经变成resolved

new Promise(function(resolve, reject) {
    resolve('success');
    throw new Error('error');
}).catch(function(error) {
    console.info(error); // 不会执行到这里
});

另外,catch里的代码也可能出异常,所以catch后面也还可以跟catch的议案。

new Promise(function(resolve, reject) {
    throw new Error('error');
}).catch(function(error) {
    console.info(error);  // Error: error
    throw new Error('catch error');
}).catch(function(error){
    console.info(error); // Error: catch error   
};

BlueBird的 finally 和 done

异常的try...catch后面可以跟finally来执行必须要执行的代码,Promise原生并不支持,可以引入BlueBird的扩展库来支持。 另外还有done在最后面来表示执行结束并抛出可能出现的异常,比如最后一个catch代码块里的异常。

let p = new Promise(function(resolve, reject) {
    x = 2;  // error, 没有声明x变量
    resolve('success');
}).catch(function(error) {
    console.info(error); 
}).finally(()=>{ // 总会执行这里
    console.info('finish');
    y = 2;  // error, 没有声明y变量
}).done(); 

try{
    p.then(()=>console.info('done'));
} catch (e){
    console.info(e); // 由于最后面的done,所以会把finally里的异常抛出来,如果没有done则不会执行到这里
}

并行执行Promise

虽然JavaScript是单线程语言,但并不妨碍它执行一些IO并行操作,如不阻塞发出http request,然后异步等待。 Promise除了用then来顺序执行外,也同样可以不阻塞同时执行多个Promise然后等所有结果返回再进行后续操作。 C#的Task有个WhenAll的静态方法来做这个事,Promise则是用all方法达到同样目的。 all方法接受实现Iterator接口的对象,比如数组。

let p = Promise.all([p1, p2, p3]);

all返回的是一个新的Promise- p,p的状态是由p1, p2, p3同时决定的:

p.resolved = p1.resolve && p2.resolve && p3.resolve
p.rejected = p1.rejected || p2.rejected || p3.rejected

也就是说p的成功需要p1,p2,p3都成功,而只要p1, p2, p3里有任何一个失败则p失败并退出。

Promise还有一个方法race同样是并行执行多个Promise,不同于all的是它的成功状态和错误状态一样,只要有一个成功就成功,如同C# Task的Any方法。

let p = Promise.race([p1, p2, p3]);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏xingoo, 一个梦想做发明家的程序员

析构函数-复制构造函数-赋值操作符重载-默认构造函数<代码解析>

通过下面primer中的一道习题,可以更深刻的了解,析构函数,复制构造函数,赋值操作符重载,默认构造函数的使用。 但是我的结果与primer习题解答里面的并不相...

1976
来自专栏coding for love

JS入门难点解析8-作用域,作用域链,执行上下文,执行上下文栈等分析

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

801
来自专栏喵了个咪的博客空间

zephir-(9)类和对象2

#zephir-(9)类和对象2# ? ##前言## 先在这里感谢各位zephir开源技术提供者 zephir全面使用对象编程,这就是为什么拓展的使用方式只能是...

3628
来自专栏Python攻城狮

Python-time模块一、python time模块的简介 二、python time模块函数

注意:时间戳(timestamp)的方式:通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量。我们运行“type(time.tim...

843
来自专栏JavaQ

多参数方法进阶

很多高级工程师还在写包含N个参数的方法、使用setter方法构造实例,其实这些方式都是过时并且有很大缺陷的,本篇将深入讲解这些问题及解决方法。 多参数方法的问题...

33411
来自专栏大数据

在Python中什么时候用Yield什么时候用Return

许多Python开发人员在代码中使用yield,而不考虑他们是否真的需要。这篇文章解释了你什么时候应该使用它。

3220
来自专栏码神联盟

java常见异常汇总

程序猿的成长之路,从这开始.......... ? 在6月的投票中,结果昨天已经出来了,大家多数的希望多推送一些java的基础知识。首先来一下热...

3676
来自专栏CDA数据分析师

工具 | 学习总结:当我学完Python我学了些什么

本文是本人学完Python后的一遍回顾,加深理解顺便留作手册以备查阅。 学习Python的这几天来,觉得Python还是比较简单,容易上手的,就基本语法而言,...

19810
来自专栏咖啡的代码人生

Java static 静态方法 并发(是否线程安全)

public class TestUitl { public static User setName(User user,String name) { ...

3856
来自专栏向治洪

Android热补丁技术—dexposed原理简析(手机淘宝采用方案)

上篇文章《Android无线开发的几种常用技术》我们介绍了几种android移动应用开发中的常用技术,其中的热补丁正在被越来越多的开发团队所使用,它涉及到da...

2406

扫码关注云+社区