Upgrade to Pro — share decks privately, control downloads, hide ads and more …

javascriptの非同期処理・過去と未来

 javascriptの非同期処理・過去と未来

javascriptの非同期処理の振り返りと、未来の実装についての紹介

More Decks by Taketoshi Aono(青野健利 a.k.a brn)

Other Decks in Programming

Transcript

  1. What is Asynchronous? e e. .g g. . s se

    et tT Ti im me eo ou ut t setTimeoutꟼ侧כ植㖈ך؝٦ٕأةحؙ♳דㄎן⳿ׁ׸׷הծ䭷㹀ׁ׸׋ 儗꟦דأ؛آُ٦ٕ涫ꐮ׃Ⳣ椚׾穄✪ׅ׷ָծ䭷㹀ׁ׸׋儗꟦ָ穗麓ׅ׷ הծ植㖈ךⳢ椚ךⴖ׸湡ח؝٦ٕغحؙꟼ侧ָㄎן⳿ׁ׸׷կ
  2. jQuery.Deferred jQueryדכֿ׸׵ךꬊず劍Ⳣ椚׾Deferredהְֲ倯岀דֲתֻⳢ椚׃ג ְת׃׋կ function delayHello() { var d = new

    $.Deferred; setTimeout(function(){ d.resolve('Hello'); }, 1000); return d.promise(); } delayHello().done(function(word) {console.log(word)})
  3. Promise ׉׃גծאְחEcmascriptחPromiseָ㼪Ⰵׁ׸׷ const p = new Promise((resolve, reject) => {

    setTimeout(() => resolve('hello')); }); p.then(word => console.log(word));
  4. Generator & co ׁ׵חծGenerator׮Ecmascriptח㼪Ⰵׁ׸׷կ Generator⽃⡤דכꬊず劍Ⳣ椚ך㉏겗כ鍑寸דֹזְָծcoػح؛٦آ׾ ⢪ֲה⟃♴ך圫חז׷կ const hello = ()

    => new Promise(resolve => { setTimeout(() => resolve("hello"), 300); }); const world = () => new Promise(resolve => { setTimeout(() => resolve("world"), 300); }); co(function* () { var hello = yield hello(); var world = yield world(); return `${hello} ${world}`; }).then(word => console.log(value));
  5. async & await ׉׃גծֿ׸׵׾驎תִծasync awaitהְֲ堣圓ָES7חג䱰欽ׁ׸׋կ ֿ׸כPromise׾ⷚ涸ח何㊣׃ծקר䩛竲ֹ倯ך膷דꬊず劍Ⳣ椚׾鎸鶢ד ֹ׷կ async helloWorld() {

    const hello = await new Promise(resolve => { setTimeout(() => resolve('hello')); }); const word = await new Promise(resolve => { setTimeout(() => resolve('world')); }); console.log(`${hello} ${world}`) }
  6. Asynchronous Iterators ׋׌׃ծasync await׾׮׏ג׃ג׮ꬊず劍ٕ٦فכ㺁僒דכזְկ ׉ֿדծAsynchronous Iteratorsהְֲ➬圫ָ䲿周⚥דծ植㖈Stage3 ח֮׷կ async function* readLines(path)

    { let file = await fileOpen(path); try { while (!file.EOF) { yield await file.readLine(); } } finally { await file.close(); } } for await (const line of readLines(filePath)) { console.log(line); }