JavaScriptのPromiseをわかりやすく説明したい

勉強していてなかなか理解できずつらかったPromiseについて、自分なりにわかりやすい形で、実例を出して説明します。

Transcript

1. +BWB4DSJQUͷ1SPNJTFΛ
   Θ͔Γ΍͘͢આ໌͍ͨ͠ ઍ༿༤ଠɹ!DIJIBTP ʢ౔ʣ
2. ࣗݾ঺հ wDIJIBTPʢͪ͸ͦʣͰ͢
   wϑΟϤϧυϒʔτΩϟϯϓͰษڧத ਐߦ౓
   
   w޷͖ͳ΋ͷɿΞχϝɺອըɺ௼ΓɺྉཧɺԻָɺ ञʂʂɺϓϩάϥϛϯάʂɹ
   w ྛాٿɺߴڮ༿հɺϓϩϝΞɺ
   UIF
   QJMMPXTɺ3):.&45&3
   
   FUD
3. ڭՊॻΛશ෦ಡΜ͕ͩɺ+BWB4DSJQU ͷඇಉظϓϩάϥϛϯά͕Θ͔Βͳ ͗ͯͭ͢Β͔ͬͨ ಛʹϓϩϛε͕ͭΒ͍ ͜ͷςʔϚΛબΜͩഎܠ
4. ࣗ෼ͳΓʹΘ͔Γ΍͘͢
   આ໌ͯ͠Έ͍ͨ ωλόϨɿؤு͚ͬͨͲɺ͋Μ·ΓΘ͔Γ΍͘͢ͳ͍Ͱ͢
5. +BWB4DSJQUͰͷඇಉظϓϩάϥϛϯάͷํ๏Λɺ
   ςΩετϑΝΠϧΛಡΈࠐΉϓϩάϥϜΛྫʹͯ͠આ໌͠·͢ɻ ͜Ε͔Β࿩͢͜ͱ ɾඇಉظϓϩάϥϛϯάͱ͸ʁ
   ɾίʔϧόοΫʹΑΔ࣮ݱํ๏
   ɾϓϩϛεʹΑΔ࣮ݱํ๏
   ɾൺֱ BUYU a.txtͷ಺༰ͩΑ CUYU b.txtͷ಺༰ͩΑ DUYU c.txtͷ಺༰ͩΑ a.txtͷ಺༰ͩΑ b.txtͷ಺༰ͩΑ c.txtͷ಺༰ͩΑ ࣮ߦ݁Ռ +BWB4DSJQUͷ
   ϓϩάϥϜ ̏ͭͷςΩετϑΝΠϧΛಡΈࠐΜͰɺͦͷॱ൪ͷ··ίϯιʔϧ্ʹදࣔ ˞্هΛ࣮ݱ͢Δʹ͸αʔόʔΛ ཱͯΔඞཁ͕͋Γ·͕͢ɺͦ͜͸ ׂѪ͠·͢
6. ඇಉظϓϩάϥϛϯάͬͯʁ ϢʔβʔͷϘλϯΫϦοΫɺσʔλͷϩʔυͷΑ͏ͳ
   ඇಉظΠϕϯτ͕ൃੜͨ͠ࡍͷॲཧΛهड़͢Δ͜ͱ
7. +BWB4DSJQUͰඇಉظϓϩάϥϛϯά͢ΔͨΊͷಓ۩ ίʔϧόοΫ
   ϓϩϛε ଞʹ΋͋ΔΒ͍͚͠ͲͱΓ͋͑ͣɾɾɾ
8. ϑΝΠϧͷಡΈࠐΈɿ͜͏ॻ͍ͯ΋μϝ const prefix = "http://localhost:7070/"; const xhr1 = new XMLHttpRequest(); xhr1.open("GET", prefix + "a.txt"); xhr1.send(); console.log(xhr1.response); console.log("͜Ε͕࠷ऴߦͰ͢"); ࣮ߦ݁Ռ ϩʔυΛ଴ͨͣʹ࣮ߦ͞ΕΔ DBMMCBDLKT BUYUΛ(&5͢ΔϦΫΤετͩΑ YIS͍ͯ͏໊લͷ9)3ΦϒδΣΫτ࡞ͬͯͶ ϦΫΤετඈ͹ͯ͠Ͷ ϨεϙϯεΛίϯιʔϧʹදࣔͯ͠Ͷ
9. ϑΝΠϧͷಡΈࠐΈɿίʔϧόοΫΛ࢖͏ ؔ਺ʹ౉͞Εͨؔ਺ΛίʔϧόοΫؔ਺ͱ͍͏ const prefix = "http://localhost:7070/"; const xhr1 = new XMLHttpRequest(); xhr1.open("GET", prefix + "a.txt"); xhr1.addEventListener("load", event => console.log(xhr1.response)); xhr1.send(); console.log("͜Ε͕࠷ऴߦͰ͢"); ࣮ߦ݁Ռ ϩʔυͰ͖ͨΒϨεϙϯεΛίϯιʔϧʹදࣔͯ͠Ͷ
10. ϑΝΠϧͷಡΈࠐΈɿίʔϧόοΫ஍ࠈ ඇಉظॲཧΛͭͳ͛Α͏ͱ͢Δͱωετ͞Εͯݟ௨͕͠ѱ͍ const prefix = "http://localhost:7070/"; const xhr1 = new XMLHttpRequest(); xhr1.open("GET", prefix + "a.txt"); xhr1.addEventListener("load", event => { const xhr2 = new XMLHttpRequest(); xhr2.open("GET", prefix + "b.txt"); xhr2.addEventListener("load", event => { const xhr3 = new XMLHttpRequest(); xhr3.open("GET", prefix + "c.txt"); xhr3.addEventListener("load", event => { console.log(xhr3.response); }); xhr3.send(); console.log(xhr2.response); }); xhr2.send(); console.log(xhr1.response); }); xhr1.send(); console.log("͜Ε͕࠷ऴߦͰ͢"); DBMMCBDL@IFMMKT ࣮ߦ݁Ռ
11. ڞ௨෦෼Λ·ͱΊͯ΋·ͩͭΒ͍ const prefix = “http://localhost:7070/"; function openFile(url, onload) { const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.addEventListener("load", e => { onload(e, xhr); console.log(xhr.response); }); xhr.send(); } openFile(prefix + "a.txt", (event, xhr) => { openFile(prefix + "b.txt", (event, xhr) => { openFile(prefix + "c.txt", (event, xhr) => {}); }); }); console.log("͜Ε͕࠷ऴߦͰ͢"); DBMMCBDL@IFMMKT ࣮ߦ݁Ռ ϑΝΠϧͷಡΈࠐΈɿίʔϧόοΫ஍ࠈ
12. ɾ+BWB4DSJQUʹ͸1SPNJTFͱ͍͏Ϋϥε͕͋Δ
    ɾ1SPNJTFͷΠϯελϯε͸ඇಉظॲཧΛϥοϓͯ͠࢖͏
    ɾ1SPNJTF͸̏ͭͷঢ়ଶΛऔΔ
    ɹɹɾGVMpMMFEʢ׬ྃʣɹ
    ॲཧ͕શͯ੒ޭͨ͠
    ɹɹɾSFKFDUFEʢغ٫ʣɿ్தͰΤϥʔ͕ൃੜͨ͠
    ɹɹɾQFOEJOH
    
    
    
    
    
    
    
    
    
    
    
    
    ɿ׬ྃ΋غ٫΋͞Ε͍ͯͳ͍
    ɾUIFOϝιουͰ1SPNJTF͕׬ྃͨ͠Β࣮ߦ͢ΔॲཧΛهड़͢Δ ϓϩϛεͱ͸ʁ
13. ϓϩϛεͷ࢖͍ํΠϝʔδ 1SPNJTF
    ඇಉظॲཧ UIFO
    
    IPHF ʜ
    GVODUJPO
    IPHF ʜ \
    
    
    
    
    DPOTU
    Q
    
    OFX
    1SPNJTF ʜ \
    
    
    
    
    
    
    
    
    
    
    ɾ
    
    
    
    
    
    
    
    
    
    
    ɾ
    
    
    
    
    
    
    
    
    
    
    ɾ
    
    
    
    
    ^
    
    
    
    
    SFUVSO
    Q
    ^ 1SPNJTFΠϯελϯεΛฦؔ͢਺
    IPHF IPHF ʜ 1SPNJTF
    ඇಉظॲཧ UIFO
    
    IPHF ʜ
    1SPNJTF
    ඇಉظॲཧ UIFO
    
    IPHF ʜ
    ɾ
    ɾ
    ɾ
14. ϑΝΠϧͷಡΈࠐΈɿϓϩϛεΛ࢖͏ function openFile(url) { const p = new Promise(function(onFulfilled, onRejected) { const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.addEventListener("load", e => { console.log(xhr.responseText); onFulfilled(); }); xhr.send(); }); return p; } const prefix = "http://localhost:7070/"; openFile(prefix + "a.txt") .then(() => openFile(prefix + "b.txt")) .then(() => openFile(prefix + "c.txt")); console.log("͜Ε͕࠷ऴߦͰ͢"); QSPNJTF@QBSBEJTFKT ࣮ߦ݁Ռ
15. ϓϩϛεΛੜ੒ͯ͠Δ෦෼Λॻ͖Լ͢ const p = new Promise( function(onFulfilled, onRejected) { const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.addEventListener("load", e => { console.log(xhr.responseText); onFulfilled(); }); xhr.send(); } ); 1SPNJTFΠϯελϯεΛ࡞ΔΑ
    ɹ1SPNJTFͷίϯετϥΫλʹԾҾ਺PO'VMpMMFE ͱPO3FKFDUFE౉ͯ͠
    ɹɹఆ਺
    YIS
    ͱ͍͏9)3ΦϒδΣΫτΛͭͬͯ͘Ͷ
    ɹɹYIS͸VSMͷϦιʔεΛ(&5͢ΔϦΫΤετͩΑ
    ɹɹϦΫΤετඈ͹ͯ͠σʔλ͕ϩʔυ͞ΕͨΒҎԼΛ࣮ߦͯ͠Ͷ
    ɹɹ
    ɹɹɹɹϨεϙϯεͷςΩετΛίϯιʔϧʹදࣔͯ͠Ͷ
    ɹɹɹɹԾҾ਺PO'VMpMMFEΛ࣮ߦͯ͠Ͷ
    ɹɹɹɹʢPO'VMpMMFE͸ؔ਺ʣ
    ɹɹ
    ɹɹϦΫΤετඈ͹ͯ͠Ͷ
    
16. ϓϩϛεͷத਎͸͜Μͳײ͡ʢͨͿΜʣ 1SPNJTFΦϒδΣΫτΛ࡞Δ
    
    
    1SPNJTFΦϒδΣΫτͷԾҾ਺͸PO'VMpMMFE ͱPO3FKFDUFE
    ɹɹYISͱ͍͏ϦΫΤετΦϒδΣΫτΛ࡞Δ
    ɹɹ63-ͷϦιʔεΛ(&5͢ΔϦΫΤετ
    ɹɹϦΫΤετඈ͹ͯ͠σʔλ͕ϩʔυ͞ΕͨΒҎԼΛ΍ͬͯͶ
    ɹɹʢ͙͢΍Εͱ͸ݴͬͯͳ͍ʣ
    ɹɹɹɹϨεϙϯεͷςΩετΛίϯιʔϧʹදࣔ͢Δ
    ɹɹɹɹԾҾ਺PO'VMpMMFEʹϦΫΤετΦϒδΣΫτ౉࣮ͯ͠ߦ͢Δ
    ɹɹɹɹʢڻዼͷਅ࣮ɿPO'VMpMMFE͸ؔ਺ʣ
    1SPNJTFΦϒδΣΫτ ໊લͷͳ͍ؔ਺ ୈҾ਺ʢؔ਺ʣ
    ʢ͜Ε͸ઈରඞཁʣ
    
    
    ୈҾ਺ʢؔ਺ʣ
    ඇಉظతʹ࣮ߦ͍ͨ͜͠ͱ
    ɾ
    ɾ
    ɾ const p = new Promise( function(onFulfilled, onRejected) { const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.addEventListener("load", e => { console.log(xhr.responseText); onFulfilled(); }); xhr.send(); } ); ׬ྃ࣌ʹ࣮ߦ͍ͨ͜͠ͱ
    ɾ
    ɾ
    ɾ غ٫࣌ʹ࣮ߦ͍ͨ͜͠ͱ
    ɾ
    ɾ
    ɾ
17. ๻ͷײ૝ɿ
    ɹਖ਼௚ɺίʔϧόοΫ͚ͩͷํ͕Θ͔Γ΍͍͢ͷͰ͸ɾɾɾʁ
18. UIFOνΣʔϯΛGPSͰ·ͱΊΒΕΔ function openFile(url) { const p = new Promise(function(onFulfilled, onRejected) { const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.addEventListener("load", e => { console.log(xhr.responseText); onFulfilled(); }); xhr.send(); }); return p; } const prefix = “http://localhost:7070/"; const dataIds = ["a", "b", "c"]; let promise = Promise.resolve(); // ղܾࡁΈͷۭͷPromiseΛ࡞Δ for (const id of dataIds) { promise = promise.then(() => openFile(prefix + `/${id}.txt`)); } console.log("͜Ε͕࠷ऴߦͰ͢"); QSPNJTF@QBSBEJTFKT ࣮ߦ݁Ռ
19. ൺֱ
    ϑΝΠϧݸ const dataIds = ["a", "b", "c"]; let promise = Promise.resolve(); for (const id of dataIds) { promise = promise.then(() => openFile(prefix + `${id}.txt`)); } ίʔϧόοΫ openFile(prefix + "a.txt", (event, xhr) => { openFile(prefix + "b.txt", (event, xhr) => { openFile(prefix + "c.txt", (event, xhr) => {}); }); }); ϓϩϛε
20. ൺֱ
    ϑΝΠϧݸ const dataIds = ["a", "b", "c", "d", "e", "f", "g", "h", "i", “j"]; let promise = Promise.resolve(); for (const id of dataIds) { promise = promise.then(() => openFile(prefix + `${id}.txt`)); } ίʔϧόοΫ openFile(prefix + "a.txt", (event, xhr) => { openFile(prefix + "b.txt", (event, xhr) => { openFile(prefix + "c.txt", (event, xhr) => { openFile(prefix + "d.txt", (event, xhr) => { openFile(prefix + "e.txt", (event, xhr) => { openFile(prefix + “f.txt", (event, xhr) => { openFile(prefix + "g.txt", (event, xhr) => { openFile(prefix + "h.txt", (event, xhr) => { openFile(prefix + "i.txt", (event, xhr) => { openFile(prefix + “j.txt", (event, xhr) => {}); }); }); }); }); }); }); }); }); }); ϓϩϛε
21. ·ͱΊ 1SPNJTF
    ඇಉظॲཧ UIFO
    
    IPHF ʜ
    IPHF ʜ 1SPNJTF
    ඇಉظॲཧ UIFO
    
    IPHF ʜ
    1SPNJTF
    ඇಉظॲཧ UIFO
    
    IPHF ʜ
    ɾ
    ɾ
    ɾ 1SPNJTFΦϒδΣΫτΛ࡞Δ
    
    
    1SPNJTFΦϒδΣΫτͷԾҾ਺͸PO'VMpMMFE ͱPO3FKFDUFE
    ɹɹYISͱ͍͏ϦΫΤετΦϒδΣΫτΛ࡞Δ
    ɹɹ63-ͷϦιʔεΛ(&5͢ΔϦΫΤετ
    ɹɹϦΫΤετඈ͹ͯ͠σʔλ͕ϩʔυ͞ΕͨΒҎԼΛ΍ͬͯͶ
    ɹɹʢ͙͢΍Εͱ͸ݴͬͯͳ͍ʣ
    ɹɹɹɹϨεϙϯεͷςΩετΛίϯιʔϧʹදࣔ͢Δ
    ɹɹɹɹԾҾ਺PO'VMpMMFEʹϦΫΤετΦϒδΣΫτ౉࣮ͯ͠ߦ͢Δ
    ɹɹɹɹʢڻዼͷਅ࣮ɿPO'VMpMMFE͸ؔ਺ʣ
    1SPNJTFΦϒδΣΫτ ໊લͷͳ͍ؔ਺ ୈҾ਺ʢؔ਺ʣ
    ʢ͜Ε͸ઈରඞཁʣ
    
    
    ୈҾ਺ʢؔ਺ʣ
    ඇಉظతʹ࣮ߦ͍ͨ͜͠ͱ
    ɾ
    ɾ
    ɾ ׬ྃ࣌ʹ࣮ߦ͍ͨ͜͠ͱ
    ɾ
    ɾ
    ɾ غ٫࣌ʹ࣮ߦ͍ͨ͜͠ͱ
    ɾ
    ɾ
    ɾ
22. αϯϓϧίʔυɺ(JU)VCʹ্͛·ͨ͠
    
    
    
    IUUQTHJUIVCDPNDIJIBTPBTZODISPOPVT@TUVEZ
    ɹɹɹ݁ہࣗ෼Ͱಈ͔ͯ͠ΈΔͷ͕Ұ൪ʂʂ
23. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    
    มͳͱ͋ͬͨ͜Βڭ͍͑ͯͩ͘͞ʂ
24. ࢀߟࢿྉ 1SPNJTFͱBTZODBXBJUͰ+BWB4DSJQUͷඇಉظॲཧΛγϯϓϧʹهड़͢Δ
    ɹɹIUUQTTCqOFUCMPHTJNQMJGZJOHBTZODDPEFXJUIQSPNJTFBOEBTZODBXBJU
    ॳΊͯͷ+BWB4DSJQU
    ୈ൛
    ʕ&4Ҏ߱ͷ࠷৽΢Σϒ։ൃ
    ɹɹIUUQTXXXBNB[PODPKQEQ
    1SPNJTFʹΑΔ+BWB4DSJQUඇಉظॲཧϨγϐू
    ɹɹIUUQTTCqOFUCMPHQSPNJTFDPPLCPPLJ