ECMAScript Promise

Transcript

1. ☃ECMAScript Promise☃

2. yuta suzuki(32) frontend engineer

3. ECMAScript

4. &$."4DSJQU͸+BWB4DSJQUͷ࢓༷ɻ&4ͱུ͞ΕΔࣄ͕ଟ͍ɻݱࡏͷ+BWB4DSJQU͸&4 ͱ͍͏όʔδϣϯɻ
   ࢓༷ࡦఆʹ͸εςʔδ͕͋Γɺ4UBHF
   
   4USBXNBOɺ4UBHF
   
   1SPQPTBMɺ4UBHF
   
   %SBGUɺ4UBHF
   
   $BOEJEBUFɺ4UBHF
   
   'JOJTIFEͷ̑ஈ֊͋Δɻ
   'JOJTIFEʹͳΔʹ͸ɺ̎ͭҎ্ͷϒϥ΢β࣮૷͕ඞཁɻ Ҿ༻ݩɿ&$."4DSJQUͱ͸Կ͔ʁ

5. Promise

6. 1SPNJTF͸ඇಉظॲཧΛந৅Խͨ͠ΦϒδΣΫτͱͦΕΛૢ࡞͢Δ࢓૊Έͷ͜ͱɻ

7. function sleep(time) { return new Promise(function (resolve) { setTimeout(function ()

   { resolve(time) }, time); }); } sleep(3000).then(function (time) { console.log(time * 3); // 3ඵޙʹ9000Λදࣔ });

8. ES2015 - ES2017

9. function sleep(time, callback) { setTimeout(function () { callback(time) }, time);

   } sleep(3000, function (time) { // 3ඵޙʹ9000Λදࣔ console.log(time * 3); }); function sleep(time) { return new Promise(function (resolve) { setTimeout(function () { resolve(time) }, time); }); } sleep(3000).then(function (time) { // 3ඵޙʹ9000Λදࣔ console.log(time * 3); });

10. function ajax(URL) { return new Promise(function (resolve, reject) { var

    req = new XMLHttpRequest(); req.open('GET', URL, true); req.onload = function () { if (req.status === 200) { resolve(req.responseText); } else { reject(new Error(req.statusText)); } }; req.onerror = function () { reject(new Error(req.statusText)); }; req.send(); }); } ఆٛ ajax('/api/foo') .then(function success(value){ console.log(value); }) .catch(function error(err){ console.error(err); }); ࣮ߦ

11. ajax('/api/foo') .then(function success(value){ return ajax('/api/foo/bar/' + value) }) .then(function success(value){

    return ajax('/api/foo/bar/buz/' + value) }) .then(function success(value){ console.log(value) }) ajax('/api/foo') .then(function success(value){ ajax('/api/foo/bar/' + value) .then(function success(val)){ ajax('/api/foo/bar/buz/' + val) .then(function success(v)){ console.log(v) }) }) })

12. Async Await Function

13. function sleep(time) { return new Promise(function (resolve) { setTimeout(function ()

    { resolve(time) }, time); }); } async function call(time) { var sleepTime = await sleep(time) console.log(sleepTime * 2) } call(1000) // 1ඵޙʹ2000Λදࣔ window.addEventListener('click', async function(){ var sleepTime = await sleep(2000) console.log(delayTime * 3) // 2ඵޙʹ6000Λදࣔ })

14. ES2018

15. Async Iteration

16. const items = [fetch(‘/api/item/1’), fetch(‘/api/item/2’)] function getItemPromises() { for (const

    item of items) { console.log(item) // get promise } } async function getItemContexts() { for await (const item of items) { console.log(item) // get api response } } getItemPromises() getItemContexts()

17. Dynamic import

18. async function main() { const { Person } = await

    import("./Person.js") const p = new Person("Yuta") p.say() // I’m Yuta } main() main.js Person.js export class Person { constructor(name = "foo") { this.name = name } say() { console.log("I'm " + this.name) } }

19. Closing

20. 1SPNJTFΛ্खʹ࢖͏͜ͱ͸ɺՄಡੑͷߴ͍+BWB4DSJQUΛॻ্͘Ͱඞਢʹͳͬͯ͘Δɻ
    ݸਓతʹ+BWB4DSJQUք۾͸ߋ৽͕ૣ͍͔Βָ͍͠ɻ
    ϞμϯϥΠϒϥϦͷυΩϡϝϯτ͸BTZOD
    BXBJUͱ͔νϡʔτϦΞϧͰ࢖ͬͯ͘ΔͷͰɺ ࠓͷ͏ͪʹ1SPNJTFΛ͓֮͑ͯ͘ͱ޾ͤʹͳΕΔ͜ͱ͕ଟ͍ɻ

21. Thanks