前言

  当今 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. MathJax TeX & LaTeX

    MathJax TeX & LaTeX mathcal https://leetcode-cn.com/problems/binary-search/solution/er-fen-cha-z ...

  2. Headless Chrome Node API

    puppeteer Headless Chrome Node API https://github.com/GoogleChrome/puppeteer https://pptr.dev/ PWA h ...

  3. nasm astrspn函数 x86

    xxx.asm %define p1 ebp+8 %define p2 ebp+12 %define p3 ebp+16 section .text global dllmain export ast ...

  4. nasm astricmp函数 x86

    xxx.asm: %define p1 ebp+8 %define p2 ebp+12 %define p3 ebp+16 section .text global dllmain export as ...

  5. html 布局,上下各100px,中间自适应

    flex <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  6. ts 索引签名 无视多余的属性类型

    interface SquareConfig { color?: string; width?: number; [propName: string]: any; } function asd(opt ...

  7. 《容器高手实战: Dockerfile最佳实践》

    Dockerfile最佳实践一个容器对应一个进程一个Docker容器应该只对应一个进程,也就是一个Docker 镜像一般只包含一个应用的制品包(比如.jar). 在需要组合多个进程的场景,使用容器组( ...

  8. 搭建SSH框架

    以下为链接地址:https://www.2cto.com/kf/201606/518341.html

  9. sql where 1=1 的详细解释

    原文来自:https://blog.csdn.net/zc474235918/article/details/50544484 看一下这两个句子: select * from user select ...

  10. Java基本概念:方法

    一.简介 描述: Java中方法是语句的集合,它们在一起执行一个功能. 方法是解决一类问题的步骤的有序组合,它在类中定义,属于类的成员,包含于类或对象中. 方法在程序中被创建后,在其他使用了该方法的地 ...