DEV Community

Kueiapp
Kueiapp

Posted on • Updated on

UNDERSTAND PROMISE IN 5 MINUTES

Reference

http://blog.kueiapp.com/en/programming/understand-promise-in-5-minutes-javascript/

Synchrounous and asynchrounous requests

Image description

A process need to wait for another process got finished and then does something else in synchrounous model; in contract, asynchrounous one does not. ( It will describe with sync and async below.)

Image description
image source

Sample for async functions

Image description

Non-blocking environment

  • how to handle the result of each async processes below??
  • how does our system know the async process is done?? Async

Image description

To handle async processes

what is ES6, ES7, ECMAScript2015...

Method 1: Callback function // ES4 standard

Image description

what is Callback hell

  • Real example 1: XMLHttpRequest ES5 standard

Image description

Method 2: Promise ES6 standard

An object to wrap and unwrap objects and functions asynchronously

Image description

  • Real example 2a: jQuery

Image description

  • Real example 2b: Fetch HTML5 standard

Image description

Method 3: async/await ES7 candidate

For unwrap Promise object easily

Image description

Summary

Because sending requests asynchrounously is hard for developers to handle their responses. Using these new methods could be easier to take asynchrounous functions sequentially like accessing synchrounous functions.

Image description
Please be aware that Promise.all() does not guarantee all requests in a sequence but for the resolved result; besides, if a process got failed, Promise.all() would only get error catch

Reference

http://blog.kueiapp.com/en/programming/understand-promise-in-5-minutes-javascript/

Top comments (0)