前言

  当今 ES7 标准大行其道,使用 async + await 将异步逻辑同步书写已经普及,但是却有许多旧库或旧代码尚未完全 Promise 化,急需一个小工具去挖去这代码中藓疾。

设计和实现


  由于通常情况下,回调函数 callback 都是作为最后一个参数传入主调函数,所以 aw 小工具的设计如下:

// Transform Callback-style function to Promise-style function.
export type AwCallback<RES> = (res?: RES) => void;
export function aw(num: number): Promise<void>;
export function aw<A, B, C, D, E, /**/ RES>(exec: (a: A, b: B, c: C, d: D, e: E, callback: AwCallback<RES>) => void, a: A, b: B, c: C, d: D, e: E): Promise<RES>;
export function aw<A, B, C, D, /*---*/ RES>(exec: (a: A, b: B, c: C, d: D, /*-*/ callback: AwCallback<RES>) => void, a: A, b: B, c: C, d: D /*-*/): Promise<RES>;
export function aw<A, B, C, /*------*/ RES>(exec: (a: A, b: B, c: C, /*-------*/ callback: AwCallback<RES>) => void, a: A, b: B, c: C /*-------*/): Promise<RES>;
export function aw<A, B, /*---------*/ RES>(exec: (a: A, b: B, /*-------------*/ callback: AwCallback<RES>) => void, a: A, b: B /*-------------*/): Promise<RES>;
export function aw<A, /*------------*/ RES>(exec: (a: A, /*-------------------*/ callback: AwCallback<RES>) => void, a: A /*-------------------*/): Promise<RES>;
export function aw</*---------------*/ RES>(exec: (/*-------------------------*/ callback: AwCallback<RES>) => void /*-------------------------*/): Promise<RES>;
export async function aw(execOrNum: number | ((...res: any[]) => void), ...args: any[]) {
const exec = typeof execOrNum !== "number" ? execOrNum : (r: any) => setTimeout(r, execOrNum);
const res = await new Promise(r => exec.apply(null, [...args, r]));
if (res instanceof Error) throw res;
/*---------------*/ else return res;
}

使用

const func = (arg,callback)=>callback(arg);
const sum = (arg0:number,arg1:number,arg2:number,callback:(res:number)=>void )=>setTimeout(()=>callback(arg0+arg1+arg2),1000);
// 用法1:睡眠 1 秒
await aw(1000)
// 用法2:await aw(主调函数,依次顺序列出所有参数不包括回调函数)
const result1 = await aw(func,arg);
const result0 = await aw(sum, arg0,arg1,arg2) ;

Web 前端 - 优雅地 Callback 转 Promise :aw的更多相关文章

  1. Web 前端 - 浅谈外部手动控制 Promise 状态

    前言 当有多个共享资源.协同操作的时候,往往需要根据动态亦或是复杂的条件以控制和调用程序逻辑. 还是那句话,懂的人自然懂,不懂的人也搜不到这个随笔. 设计 PendingPromise<T> ...

  2. Web 前端 - 又不仅限于 Web 前端 - 协程锁问题

    前言 最近两天的 web 前端开发中,早前的锁实现 (自旋锁) 出现了一些不合理的现象,所以有了这片随笔 什么是协程锁?能点进这个博客的的你肯定是明白的,不明白的人根本搜不到我这随笔,不多做赘述. 一 ...

  3. 【原创】分布式之数据库和缓存双写一致性方案解析(三) 前端面试送命题(二)-callback,promise,generator,async-await JS的进阶技巧 前端面试送命题(一)-JS三座大山 Nodejs的运行原理-科普篇 优化设计提高sql类数据库的性能 简单理解token机制

    [原创]分布式之数据库和缓存双写一致性方案解析(三)   正文 博主本来觉得,<分布式之数据库和缓存双写一致性方案解析>,一文已经十分清晰.然而这一两天,有人在微信上私聊我,觉得应该要采用 ...

  4. 前端面试送命题(二)-callback,promise,generator,async-await

    前言 本篇文章适合前端架构师,或者进阶的前端开发人员:我在面试vmware前端架构师的时候,被问到关于callback,promise,generator,async-await的问题. 首先我们回顾 ...

  5. Web 前端如何优雅的处理海量数据

    Web 前端如何优雅的处理海量数据 Q: 如何在 Web 页面上处理上亿条后端返回的数据,并且保证 UI 展示的流畅性 A: 思路: 时间分片, 批处理,Buffer 缓存,虚拟滚动,Web Work ...

  6. 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

    ##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好. ...

  7. 也许你需要点实用的-Web前端笔试题

    之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...

  8. web前端学习路线与书籍推荐

    什么是web前端? 在以前,通俗的讲是网页制作,在现在,哼哼,可以参考这篇文章 http://tieba.baidu.com/p/4817153404 那么如果高效优雅的学习web呢? 注:以下纯属个 ...

  9. Silence.js高效开发移动Web前端类库

    基于Zepto的轻量级移动Web前端JavaScript类库. 编写这个类库原因及目的: 采用MVC设计模式,使代码工程化结构化. 使用RouterJS,提升前端交互性能,延长页面使用时间,并通过Aj ...

随机推荐

  1. node.js & fs & file read & file write

    node.js & fs & file read & file write https://nodejs.org/api/fs.html const fs = require( ...

  2. 手机 wifi 已连接,不可上网 bug

    手机 wifi 已连接,不可上网 bug 同一个 Wi-Fi,电脑却可以? 注意事项 Mac 共享热点支持有线连接.蓝牙连接的网络进行共享. 如果你的 Mac 本身是通过 wifi 来连接上网的,那就 ...

  3. Taro Next

    Taro Next Taro 2.0 https://aotu.io/notes/2020/02/03/taro-next-alpha/index.html Taro Next 的迁移指南 https ...

  4. how to get window width in javascript

    how to get window width in javascript how to get window width in js How to Detect Screen Resolution ...

  5. 同样是NGK官方推出的代币,SPC与BGV有何异同?

    近日,币圈又火热了起来,而这次火热是由NGK搅动的.原来,NGK官方空投了200万枚SPC,用于奖励NGK算力持有者.当前,已经有一部分算力持有者获得了SPC奖励,有的算力持有者获得的SPC数量惊人, ...

  6. 直播预告 | 全面的审计分析和权限管控——CloudQuery年终发布!

    2020年9月,CloudQuery 发布. 针对开发.运维人员面临的如何高效便捷访问.操作管理数据的问题,我们设计并研发了云原生安全数据操作平台,CloudQuery 就此诞生! 2020年结束之际 ...

  7. 在 TKE 中使用 Velero 迁移复制集群资源

    概述 Velero(以前称为Heptio Ark)是一个开源工具,可以安全地备份和还原,执行灾难恢复以及迁移 Kubernetes 群集资源和持久卷,可以在 TKE 集群或自建 Kubernetes ...

  8. SpringBoot接收map类型的参数

    如果某个controller的某个接口的参数特别多,也可以使用map的方式来接收参数,接收之后使用get方法获取即可. 1)get请求方式,定义map接收方式 @RequestParam(requir ...

  9. 关于安装VMware以及Linux操作系统过程

    想用Linux完成部分教学作业,虚拟机是少不了的,所以首先选择了VMware进行安装. VMware在官网下载之后,就可以直接打开安装,但是在安装过程中,建议不要勾选启动时检查产品更新和加入VMwar ...

  10. 剑指 Offer 41. 数据流中的中位数 + 堆 + 优先队列

    剑指 Offer 41. 数据流中的中位数 Offer_41 题目详情 题解分析 本题使用大根堆和小根堆来解决这个寻找中位数和插入中位数的问题. 其实本题最直接的方法是先对数组进行排序,然后取中位数. ...