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

1. Promise Intro
otis.chou
@ i-TRUE

2. Callback
Promise
Promise

3. Callback

4. • API
•
•
•
• IO
•
xhr, ajax
setTimeout
img.onload
addEventListener
fs.readFile
child_process.exec

5. Callback!!

6. Brain Fxck
Callback /

7. A-B-C-D-E-F ?

8. Callback Hell
Callback /

9. •
•
• XD

11. Callback
Promise
• chainable

12. No Return
Callback /

13. Callback

14. ...

17. side effect

18. Promise
no return out!

19. promise

20. Promise.all ...
promise-fun

21. Error Handling 💀
Callback /

22. try catch

23. Node.js callback style

24. callback throw

25. •
•

26. Promise
• catch

27. Callback
Brain Fxck
Callback Hell
,
No Return
side effect,
Error 💀 Handling
,

28. Promise

29. Promise

30. 🐣
🐣🐣

31. 🐣
🐣
🐣

32. Promise

33. Promise
promise /

34. // Promise
new Promise

35. // Promise
new Promise(function() {
//
})

36. // Promise
new Promise(function() {
//
()
})

37. // Promise
new Promise(function(resolve, reject) {
//
()
})

38. // Promise
new Promise(function(resolve, reject) {
//
(function( ) {
// resolve
resolve( )
})
})

39. // Promise
new Promise(function(resolve, reject) {
if ( () === 0) {
// reject
reject(new Error(' '))
return
}
//
(function( ) {
// resolve
resolve( )
})
})

40. // Promise
new Promise(function(resolve, reject) {
if ( () === 0) {
// reject
reject(new Error(' '))
return
}
//
(function( ) {
// resolve
resolve( )
})
})

41. $.ajax

42. promise
•
• API

45. promise

46. Promise (.then)
promise /

47. promise then

48. then promise
{
name: “Otis Chou”,
avatar_url: “…….”,
xxx: ……,
}

49. .then promise
return promise

51. return
return Promise

52. 👍

53. Promise
.then
promise
.then promise
- .then callback primitive type, array, object
- callback promise

54. Promise (.catch)
promise /

55. promise catch

56. catch

57. catch
Promise /

58. promise

59. throw Error

60. promise

61. annotis user
promise
response null
throw TypeError
avatar
promise
catch

62. catch
Promise /

63. catch

64. Promise
.catch
catch
catch
throw Error promise
catch

65. Promise API
promise /

66. 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

67. Promise

68. Promise
API
API
...

69. ECMAScript 2015
JS
Google Chrome Firefox
console
Polyfill
RSVP.js( ) Bluebird( )

71. 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