Callback 与 Promise 间的桥梁 —— promisify

news/2024/11/9 5:06:57

作者:晃晃
本文原创,转载请注明作者及出处

Promise 自问世以来,得到了大量的应用,简直是 javascript 中的神器。它很好地解决了异步方法的回调地狱、提供了我们在异步方法中使用 return 的能力,并将 callback 的调用纳入了自己的管理,而不是交给异步函数后我们就无能为力了(经常有 callback 被莫名调用两次而导致程序出错)。

今天要介绍的是 Promisify,就是回调函数与 Promise 间的桥梁。

1. promisify 介绍

什么是 promisify 呢?顾名思义,就是“promise 化”,将一个不是promise的方法变成 promise 。举个例子:

// 原有的callback调用
fs.readFile('test.js', function(err, data) {
    if (!err) {
        console.log(data);
    } else {
        console.log(err);
    }
});

// promisify后
var readFileAsync = promisify(fs.readFile);
readFileAsync('test.js').then(data => {
    console.log(data);
}, err => {
    console.log(err);
});

这两个方法效果上是等价的,但是从掌控性来说的话,我更喜欢后面的写法。

那么什么样的方法可以通过 promisify 变成 promise 呢?这里就需要介绍一个名词,nodeCallback。什么样的 callback 叫 nodeCallback ?

nodeCallback 有两个条件:1. 回调函数在主函数中的参数位置必须是最后一个;2. 回调函数参数中的第一个参数必须是 error 。举个例子:

  1. 回调函数在主函数中的参数位置
// 正确
function main(a, b, c, callback) {
    
}

// 错误
function main(callback, a, b, c) {
    
}
  1. 回调函数参数中的第一个参数必须是 error
// 正确
function callback(error, result1, result2) {
    
}

// 错误
function callback(result1, result2, error) {
    
}

这样,通过 nodeCallback ,我们定义了一个能被 promisify 的函数的格式,即,满足 nodeCallback 形式的方法,我们可以通过 promisify 来让它变成一个返回 promise 的方法。

2. promisify 的实现

下面我们来根据上述条件来手动实现一个 promisify 。

首先 promisify 需要返回一个 function ,并且这个 function 要返回一个 promise

var promisify = (func) => {
    return function() {
        var ctx = this;
        return new Promise(resolve => {
            return func.call(ctx, ...arguments);
        })
    }
}

其次,原 func 的最后一个参数是 callback

var promisify = (func) => {
    return function() {
        var ctx = this;
        return new Promise(resolve => {
            return func.call(ctx, ...arguments, function() {
                resolve(arguments);
            });
        })
    }
}

然后,回调函数中的第一个参数是 error 标记

var promisify = (func) => {
    return function() {
        var ctx = this;
        return new Promise((resolve, reject) => {
            return func.call(ctx, ...arguments, function() {
                var args = Array.prototype.map.call(arguments, item => item);
                var err = args.shift();
                if (err) {
                    reject(err);
                } else {
                    resolve(args);
                }
            });
        })
    }
}

最后,做一些优化,比如 this 作用域的自定义、回参只有一个时不返回数组

var promisify = (func, ctx) => {
    // 返回一个新的function
    return function() {
        // 初始化this作用域
        var ctx = ctx || this;
        // 新方法返回的promise
        return new Promise((resolve, reject) => {
            // 调用原来的非promise方法func,绑定作用域,传参,以及callback(callback为func的最后一个参数)
            func.call(ctx, ...arguments, function() {
                // 将回调函数中的的第一个参数error单独取出
                var args = Array.prototype.map.call(arguments, item => item);
                var err = args.shift();
                // 判断是否有error
                if (err) {
                    reject(err)
                } else {
                    // 没有error则将后续参数resolve出来
                    args = args.length > 1 ? args : args[0];
                    resolve(args);
                }
            });
        })
    };
};

测试

// nodeCallback方法func1
var func1 = function(a, b, c, callback) {
    callback(null, a+b+c);
}
// promise化后的func2
var func2 = promisify(func1);
// 调用后输出6
func1(1, 2, 3, (err, reuslt) => {
    if (!err) {
        console.log(result); //输出6
    }
})
func2(1, 2, 3).then(console.log); //输出6

以上便是 promisify 的介绍和实现,事实上有很多用 callback 来实现异步的第三方库提供的方法都是按照 nodeCallback 格式的,所以它们都可以通过 promisify 来让它变成 promise ,在遇到这些方法的时候就可以更灵活地使用啦。

iKcamp官网:http://www.ikcamp.com

访问官网更快阅读全部免费分享课程:《iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享》。
包含:文章、视频、源代码

iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。

【11月11号】上海iKcamp最新活动

报名地址:http://www.huodongxing.com/ev...

“天天练口语”小程序总榜排名第四、教育类排名第一的研发团队,面对面沟通交流。


http://www.niftyadmin.cn/n/4227222.html

相关文章

2013-12-25 基础版升级专业版后退不回去了

问:基础版升级到专业版,怎么升级?答:路径一:一钻以下的用户,您可以点击本页面最上方升级按钮升级。路径二:装修后台-右上角功能键-升级专业版 问:专业版退回到基础版,如何…

vue前端页面项目的创建

使用hbuilder新建项目vue

使用Fraps获取3D程序的FPS

Fraps为免费软件(wiki),通过Hook OpenGL(SwapBuffer)或D3D(Present)来获取目标进程的FPS信息(32位进程注入fraps32.dll,64位注入fraps64.dll),并能…

【小贴士】zepto find元素以及ios弹出键盘可能让你很头疼

前言在此,我不得不说移动端的兼容问题很多,并且很令人头疼,这不,这个星期又有两个让我逮着了,一个是使用zepto过程中出现的问题,一个是ios虚拟键盘的问题我这里做一次记录,以免以后忘了&#xf…

SpringBoot - 多模块项目的搭建教程

SpringBoot - 多模块项目的搭建教程 转载自添加链接描述 https://www.hangge.com/blog/cache/detail_2833.html

String、StringBuffer与StringBuilder之间区别 [全屏看文]

转自:http://www.cnblogs.com/A_ming/archive/2010/04/13/1711395.html 最近学习到StringBuffer,心中有好些疑问,搜索了一些关于String,StringBuffer,StringBuilder的东西,现在整理一下。 关于这三个类在字…

关于进一步推进我市医疗信息共享系统建设工作的建议

天津市十六届人大四次会议关于进一步推进我市医疗信息共享系统建设工作的建议及答复2017-10-11 16:33安竹代表提出的关于进一步推进我市医疗信息共享系统建设工作的建议医疗信息共享系统是通过信息化手段,实现医疗卫生资源的整合和结构优化,以建设居民健…