ECMAScript Promise

Cfb8fce26297afa8a8bdce280a3d705e?s=47 yutasuzuki
January 14, 2018

ECMAScript Promise

第2回名古屋若手Webエンジニア交流会のLTで発表させていただいた資料です。
主にJavaScriptのPromiseを使った機能の紹介しています。
口頭で説明している部分が多いので、テキストにほぼ起こしていません。

Cfb8fce26297afa8a8bdce280a3d705e?s=128

yutasuzuki

January 14, 2018
Tweet

Transcript

  1. ☃ECMAScript Promise☃

  2. yuta suzuki(32) frontend engineer

  3. ECMAScript

  4. &$."4DSJQU͸+BWB4DSJQUͷ࢓༷ɻ&4ͱུ͞ΕΔࣄ͕ଟ͍ɻݱࡏͷ+BWB4DSJQU͸&4 ͱ͍͏όʔδϣϯɻ ࢓༷ࡦఆʹ͸εςʔδ͕͋Γɺ4UBHF4USBXNBOɺ4UBHF1SPQPTBMɺ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ք۾͸ߋ৽͕ૣ͍͔Βָ͍͠ɻ ϞμϯϥΠϒϥϦͷυΩϡϝϯτ͸BTZODBXBJUͱ͔νϡʔτϦΞϧͰ࢖ͬͯ͘ΔͷͰɺ ࠓͷ͏ͪʹ1SPNJTFΛ͓֮͑ͯ͘ͱ޾ͤʹͳΕΔ͜ͱ͕ଟ͍ɻ

  21. Thanks