将回调转换为Promise语法

Question

为了更好地理解Promise语法，我尝试将以下伪代码转换为现代JavaScript。

以下是旧代码，以臭名昭著的回调地狱为特色：

1995年JavaScript

var floppy = require( 'floppy' );

floppy.load( 'disk1', function( data1 ) {
    floppy.prompt( ' Please insert disk 2', function() {
        floppy.load( 'disk2', function( data2 ) {
            floppy.prompt( ' Please insert disk 3', function() {
                floppy.load( 'disk3', function( data3 ) {
                    floppy.prompt( 'Please insert disk 4', function() {
                        // If Node.js would've existed in 1995.
                    } );
                } );
            } );
        } );
    } );
} );

请帮我把上面的代码转换成Promise语法的JavaScript (无异步/等待)。我是个有前途的新手，但这是我想出来的。其语法、嵌套和功能是否与上述代码相同？如果没有，请帮我将疯狂的回调转化为有承诺的美好JavaScript。

更新的代码

const floppy = require( 'floppy' );

floppy.load( 'disk1' )
.then( data1 => {
    floppy.prompt( 'Please insert disk 2' );
} )
.then(
    floppy.load( 'disk2' )
)
.then( data2 => {
    floppy.prompt( 'Please insert disk 3' );
} )
.then(
    floppy.load( 'disk3' )
)
.then( data3 => {
    floppy.prompt( 'Please insert disk 4' );
} )
.then(
    // Node.js using Promises avoids callback hell!
);

Answer 1

首先使用以下方法来匹配你的floppy对象：

floppy.loadAsync = function(d) {
    return new Promise(resolve => {
        floppy.load(d, resolve);
    });
};
floppy.PromptAsync = function(message) {
    return new Promise(resolve => {
        floppy.load(message, resolve);
    });
};

现在你可以写下：

floppy.loadAsync('disk1')
.then(data1 => floppy.promptAsync(' Please insert disk 2'))
.then(() => floppy.loadAsync('disk2'))
.then(data2 => floppy.promptAsync(' Please insert disk 3'))
.then(() => floppy.loadAsync('disk3'))
.then(data3 => floppy.promptAsync(' Please insert disk 4'));

如果您想要在最后一个回调中访问data1、data2、data3和data4，那么您就有了一个range of options available to you。

例如，使用“断链”方法，您可以这样写：

var promise1a = floppy.loadAsync('disk1');
var promise1b = promise1a.then((data1) => floppy.promptAsync(' Please insert disk 2'));

var promise2a = promise1b.then(() => floppy.loadAsync('disk2'));
var promise2b = promise2a.then((data2) => floppy.promptAsync(' Please insert disk 3'));

var promise3a = promise2b.then(() => floppy.loadAsync('disk3'));
var promise3b = promise3a.then((data3) => floppy.promptAsync(' Please insert disk 4'));

var promise4a = promise3b.then(() => floppy.loadAsync('disk4'));

Promise.all([promise1a, promise2a, promise3a, promise4a]).then((data) => {
    var data1 = data[0];
    var data2 = data[1];
    var data3 = data[2];
    var data4 = data[3];
});

Answer 2

异步会干净得多。

编写一个包装函数，将回调语法转换为promise。

const bigFloppyLoad = disk => new Promise(done => floppy.load(disk1, done));

那么我猜你也需要一个提示符...

const bigFloppyPrompt = message => new Promise(done => floppy.prompt(message, done));

然后，您可以在async块中运行它们。

(async ()=>{
  const data1 = await bigFloppyLoad('disk1');
  await bigFloppyPrompt("Insert disk 2");
  const data2 = await bigFloppyLoad('disk2');
  await bigFloppyPrompt("Insert disk 3");
  // ... and so forth
})();