GithubHelp home page GithubHelp logo

fedor / co_demo Goto Github PK

View Code? Open in Web Editor NEW
17.0 4.0 4.0 309 KB

A step-by-step guide about how to avoid callback hell with ES6 Promises + generators (aka make your own "co")

License: MIT License

JavaScript 100.00%
co promise generator es6 es2015 flow-control error-handling tutorial demo

co_demo's Introduction

if any questions, please mail to [email protected]
Please install Node.js v4 or above from nodejs.org

How to avoid callback hell

	> git clone http://github.com/fedor/co_demo
	> cd co_demo
	> npm install

Data and execution flow in the examples:
 - input -->
       (a)sync1() -->
           delay(2000) -->
               (a)sync2() -->
                   (a)sync3() -->
                       output

1. Sync version.
	
	PROS:
	 - Safe
	 - Readable: no Callback Hell
	 - Centralised error handling
	CONS:
	 - Sync

2. Async.
	
	PROS:
	 - Async
	CONS:
	 - Unsafe: no guarantee to catch "throw new Error()"
	 - No centralised error handling
	 - Callback hell

3. Promises.

	"The Promise object is used for asynchronous computations.
	A Promise represents a value which may be available now, or in the future, or never."
	โ€” https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise

	PROS:
	 - Async
	 - Centralised error handling
	 - Less callback hell
	CONS:
	 - mini-Callback Hell
	 - 2 ways to report errors (callback and throw)
	TODO:
	 - Remove error handling. What would happen?

4. Generators.

	"Generators are functions which can be exited and later re-entered.
	Their context (variable bindings) will be saved across re-entrances."
	โ€” https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/function*

	This is a showcase of generators. Not actually an example.
	
	NOTE:
	 - "function*" defines "generator function" a function you can re-enter
	 - Generator function returns "generator", an object to control its execution
	 - .next().value
	 - yield cause value return from generator function

5. Promises + Generators #1

	Try to use generator to resolve Promises without callbacks
	
	NOTE:
	 - main()
	 - runner()

6. Promises + Generators #2

	Add correct error handling (rejected Promises)

	NOTE:
	 - .throw() will actually return result, similar to .next()

7. Promises + Generators #3

	Allow runner to accept generator function, not generator

	NOTE:
	 - runner(main()) --> run(main)

8. Promises + Generators: result

	Turn runner into a Promise fabric.
	All custom async functions implemented with runner

	PROS:
	 - Async
	 - Safe
	 - Centralised error handling
	 - No callback hell
	 - Single way to report an error
	NOTE:
	 - async2() error report was simplified with runner
	 - delay() still require manual promisification

9. co and bluebird

	co is a popular "runner" from TJ. It can "yield" Promises,
	Promises inside arrays or objects, generators, etc.

	bluebird provides logic for promisification.
	Promisification: callback-function --> promise-return-function

--------

Suggestions:

 - Promisify functions with callbacks, use bluebird.promisify() && bluebird.promisifyAll().
 - Use co and for flow-control.
 - Avoid callback-based handlers for async code e.g. use for-loop, not .forEach()
 - Return Promise from async functions, not traditional-callbacks.
 - Create Promise-based functions via co
 - Only use "return new Promise(function(resolve, reject) {...})" to manually promisify interfaces

--------

BONUS: async.each() example in co_async_each.js

co_demo's People

Contributors

fedor avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.