Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Promise Intro

644 views

Published on

介紹 JavaScript 中 Promise 的概念與使用,「Callback 的問題」、「Promise 的使用」與「Promise 的導入」

Published in: Engineering

Promise Intro

  1. 1. Promise Intro otis.chou @ i-TRUE
  2. 2. Callback Promise Promise
  3. 3. Callback
  4. 4. • API • • • • IO • xhr, ajax setTimeout img.onload addEventListener fs.readFile child_process.exec
  5. 5. Callback!!
  6. 6. Brain Fxck Callback /
  7. 7. A-B-C-D-E-F ?
  8. 8. Callback Hell Callback /
  9. 9. • • • XD
  10. 10.
  11. 11. Callback
 Promise
 • chainable
  12. 12. No Return Callback /
  13. 13. Callback
  14. 14. ...
  15. 15. side effect
  16. 16. Promise no return out!
  17. 17. promise
  18. 18. Promise.all ... promise-fun
  19. 19. Error Handling 💀 Callback /
  20. 20. try catch
  21. 21. Node.js callback style
  22. 22. callback throw
  23. 23. • •
  24. 24. Promise
 • catch
  25. 25. Callback Brain Fxck Callback Hell , No Return side effect, Error 💀 Handling ,
  26. 26. Promise
  27. 27. Promise
  28. 28. 🐣 🐣🐣
  29. 29. 🐣 🐣 🐣
  30. 30. Promise
  31. 31. Promise promise /
  32. 32. // Promise new Promise
  33. 33. // Promise new Promise(function() { // })
  34. 34. // Promise new Promise(function() { // () })
  35. 35. // Promise new Promise(function(resolve, reject) { // () })
  36. 36. // Promise new Promise(function(resolve, reject) { // (function( ) { // resolve resolve( ) }) })
  37. 37. // Promise new Promise(function(resolve, reject) { if ( () === 0) { // reject reject(new Error(' ')) return } // (function( ) { // resolve resolve( ) }) })
  38. 38. // Promise new Promise(function(resolve, reject) { if ( () === 0) { // reject reject(new Error(' ')) return } // (function( ) { // resolve resolve( ) }) })
  39. 39. $.ajax
  40. 40. promise • • API
  41. 41. promise
  42. 42. Promise (.then) promise /
  43. 43. promise then
  44. 44. then promise { name: “Otis Chou”, avatar_url: “…….”, xxx: ……, }
  45. 45. .then promise return promise
  46. 46. return return Promise
  47. 47. 👍
  48. 48. Promise .then promise .then promise - .then callback primitive type, array, object - callback promise
  49. 49. Promise (.catch) promise /
  50. 50. promise catch
  51. 51. catch
  52. 52. catch Promise /
  53. 53. promise
  54. 54. throw Error
  55. 55. promise
  56. 56. annotis user promise response null throw TypeError avatar promise catch
  57. 57. catch Promise /
  58. 58. catch
  59. 59. Promise .catch catch catch throw Error promise catch
  60. 60. Promise API promise /
  61. 61. ES2015 Promise API • new Promise • Promise.prototype.then • Promise.prototype.catch • Promise.all([x,x,x]) • Promise.race([x,x,x]) • Promise.resolve(x) • Promise.reject(x) Promise promise promise
  62. 62. Promise
  63. 63. Promise API API ...
  64. 64. ECMAScript 2015 JS Google Chrome Firefox console Polyfill RSVP.js( ) Bluebird( )
  65. 65. Reference • [book] You Don't Know JS: Async & Performance • [video] Redemption from Callback Hell • [video] Funfunfuction - Promises • [article] We have a problem with promises • [spec] ECMAScript 2015 Language Specification

×