O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Promise Intro

630 visualizações

Publicada em

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

Publicada em: Engenharia
  • Seja o primeiro a comentar

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

×