一个简单的promise例子,如何用非promise,回调的方式进行改写

背景如下:最近新学js,然后看了promise方面的教程,了解到目的是为了解决回调问题,但其实回调的痛点我也没怎么搞清楚,所以想写一个试试看,发现自己写的不够好,耦合很严重,大神帮忙纠正一下哈

以下是原来的promise的例子

//做饭
function cook(){
    console.log('开始做饭。');
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('做饭完毕!');
            resolve('鸡蛋炒饭');
        }, 1000);
    });
    return p;
}
 
//吃饭
function eat(data){
    console.log('开始吃饭:' + data);
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('吃饭完毕!');
            resolve('一块碗和一双筷子');
        }, 2000);
    });
    return p;
}
 
function wash(data){
    console.log('开始洗碗:' + data);
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('洗碗完毕!');
            resolve('干净的碗筷');
        }, 2000);
    });
    return p;
}
//使用then
cook()
.then(function(data){
    return eat(data);
})
.then(function(data){
    return wash(data);
})
.then(function(data){
    console.log(data);
});

下面是我改成的非promoise形式如下,本来想写成cook(eat(wash))的形式,怎么都调不对,麻烦大神看看,怎么写的更加好一些

var cook=function (callback) {
    console.log("开始做饭");
    setTimeout(
        ()=>{
            var data="做饭好了"
            console.log(data);
            callback(data);
        },1000
    )
}

var eat=function () {
    console.log("开始吃饭");
    setTimeout(
        ()=>{
            var data="吃好了"
            console.log(data);
            wash();
        },1000
    )
}

var wash=function () {
    console.log("开始洗完");
    setTimeout(
        ()=>{
            var data="洗好了"
            console.log(data);
            //callback(data);
        },1000
    )
}


cook(eat);

阅读 1.8k
1 个回答

当 cook(eat(wash)) 没有按 cook > eat > wash 的顺序执行控制台打印函数的时候,题主已经在触感受回调的痛点了。
采用嵌套达到多层链式调用的效果,可以通过返回函数执行句柄的方式:

const eat = () => {
    const handler = {
        then: callback => handler.then = callback
    };
    setTimeout(() =>{
        handler.then instanceof Function && handler.then()
    }, 1000);
    return handler
}

这样就可以 cook.then(eat.then(wash)) 嵌套达到链式调用的效果,但是有点东施效颦的味道。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进