obj = ItemObject()
.addItem( )
.addItem( )
.removeItem( ) const new 'a' 'b' 'c' Is there anyone who doesn't like ? It makes programming so much easier. I recently experimented on converting a callback based API into a fluent api. fluent interfaces Let's take the following class as an example. It has 3 methods and each expects a callback. If we wanted to run all of them in order, we would have to call them in a nested way as shown at the bottom of the snippet. Callback = ; Task {
  func1(callback?: Callback){
    setTimeout( { .log( ); callback && callback();
    }, );
  }

  func2(callback?: Callback){
    setTimeout( { .log( ); callback && callback();
    }, );
  }

  func3(callback?: Callback){
    setTimeout( { .log( ); callback && callback();
    }, );
  }
} obj = Task();
obj.func1( {
  obj.func2( {
    obj.func3();
  })
}); export type ( )=> err?: , data?: any any void export class => () console 'function 1' return 1000 => () console 'function 2' return 1000 => () console 'function 3' return 1000 const new => () => () This will run as you would expect. Each function will run in order and 1 second apart. However, wouldn't it be nicer if we could chain methods? Ok long story short, here is how I accomplished it: Callback = ; Stage {
  func: Callback;
  callback: Callback;
} FluidTask { stack: Stage[] = []; isRunning = ; stager(func: Callback, callback?: Callback){ .stack.push({ func, callback }); (! .isRunning){ .stageRunner();
    }
  } stageRunner(){ stage = .stack.shift(); (!stage){ .isRunning = ; ;
    } .isRunning = ;
    stage.func( {
      stage.callback && stage.callback(err, data); .stageRunner();
    });
  } _func1(callback?: Callback){
    setTimeout( { .log( ); callback && callback();
    }, );
  } _func2(callback?: Callback){
    setTimeout( { .log( ); callback && callback();
    }, );
  } _func3(callback?: Callback){
    setTimeout( { .log( ); callback && callback();
    }, );
  }

  func1(callback?: Callback){ .stager( ._func1(cb), callback); ;
  }

  func2(callback?: Callback){ .stager( ._func2(cb), callback); ;
  }

  func3(callback?: Callback){ .stager( ._func3(cb), callback); ;
  }
} FluidTask()
.func1()
.func2( .log( ))
.func3()
; export type ( )=> err?: , data?: any any void interface export class private private false private this if this this private const this if this false return this true ( )=> err, data this private => () console 'function 1' return 1000 private => () console 'function 2' return 1000 private => () console 'function 3' return 1000 this ( )=> cb this return this this ( )=> cb this return this this ( )=> cb this return this new => () console 'function 2 has finished' and voila! Let me explain what's going on! There are two main methods and . stager stageRunner stack: Stage[] = []; isRunning = ; stager(func: Callback, callback?: Callback){ .stack.push({ func, callback }); (! .isRunning){ .stageRunner();
    }
  } private private false private this if this this method expects two arguments. The first one is the function to be executed and the second one is the callback to be called when the function is done. It pushes these two values the stack and if it's not running we will call the method . stager stageRunner stageRunner(){ stage = .stack.shift(); (!stage){ .isRunning = ; ;
    } .isRunning = ;
    stage.func( {
      stage.callback && stage.callback(err, data); .stageRunner();
    });
  } private const this if this false return this true ( )=> err, data this This method will be called recursively. It will take the first item out and easy enough, if it's undefined, it will mark as not running and return. If it has an item, that means we have the function. We call the function with a callback that wraps the original callback that we stored. func This is the reason why we needed to save the original callback so that we can know when the execution finishes. And then the obvious, call . stageRunner Let's look at one of the methods now! _func1(callback?: Callback){
    setTimeout( { .log( ); callback && callback();
    }, );
  }

  func1(callback?: Callback){ .stager( ._func1(cb), callback); ;
  } private => () console 'function 1' return 1000 this ( )=> cb this return this In , the function calls the method and passes in a callback function: This is the function to be executed. func1 stager (cb)=> this._func2(cb) When its turn, essentially the following will happen: this._func2((err, data) => callback(err, data)); and finally so that we can return the object reference to chain  other methods. return this; FluidTask()
.func1()
.func2( .log( ))
.func3()
.func1( .log( ))
; new => () console 'function 2 has finished' => () console 'this is fun'

Chain

Winner of Noonies 2020 for the award Hacker Noon Contributor of the Year - TYPESCRIPT.

2020 - Hacker Noon Contributor of the Year in TYPESCRIPT

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Fluent Interface With Callbacks

Too Long; Didn't Read

Coin Mentioned

Mehmet

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Fluent Interface With Callbacks

Too Long; Didn't Read

Coin Mentioned

Mehmet

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES