这是缩进JavaScript中嵌套回调的推荐方法吗？

Question

I've seen in some APIs documentation that they use the following syntax for nested callbacks:

webmap = new WebMap({
  portalItem: {
    id: "id"
  }
})
    .load()
        .then(function(instance){
            console.log(instance);
            view = new MapView({
              map: instance,
              container: "map"
            })
                .then(function(instance){

                })
            ;
        })
    ;
;

Is this the recommended way to syntax nested calls in Javascript?

Also, why? As someone who comes from Python, it seems so weird and unnecessary.

If anyone is curious, I've seen this way of identation mostly in Semantic Ui's examples https://semantic-ui.com/modules/sidebar.html#/examples

Answer 1

When you have deeply nested then calls, you might want to check if that is really necessary. In your case it is not. Move the inner then calls to the outer chain:

webmap = new WebMap({
    portalItem: {
        id: "id"
    }
}).load().then(function(instance){
    console.log(instance);
    // return (!) the promise, instead of applying a nested `then`
    return new MapView({
        map: instance,
        container: "map"
    });
}).then(function(instance){ // the `then` is now on the outer chain.

});

This way the depth of indentation remains reasonable, which is one of the advantages of promises (when you use them well).

Answer 2

You're using a Promise interface (or something similar to it) so you aren't actually using nested callbacks in the traditional sense - though I see your .then() after the MapView construction would count as one.

The then invocations for the same sequence of events should be at the same indent level, a nested sequence of events should still have all of its events at the same level. This is how I would format it:

webmap = new WebMap( {
        portalItem: {
            id: "id"
        }
    } )
    .load()
    .then( function( instance ) {
        console.log( instance );
        view = new MapView( {
            map: instance,
            container: "map"
        } )
        .then( function( instance ) {

        } );
    } );

Note you can make this more succinct by using the arrow-function syntax:

webmap = new WebMap( {
        portalItem: {
            id: "id"
        }
    } )
    .load()
    .then( instance => {
        console.log( instance );
        view = new MapView( {
            map: instance,
            container: "map"
        } )
        .then( instance => {

        } );
    } );

Readability could be improved if you move the anonymous options objects out of the sequence of events, but as the MapView constructor's options takes the instance value that's not an option in this case.

But for the WebMap constructor you can:

var webMapOption = { portalItem: { id: "id" } };
webMap = new WebMap( webMapOptions )
    .load()
    .then( instance => ... );