Past and Future of Asynchronous Javascript

せ⵸: @brn (ꫬꅿ⨳ⵃ) 耵噟: ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، ⠓爡: Cyberagent ،سذؙأةآؔRightSegment٥AI Messenger ـؚٗ: http://abcdef.gets.b6n.ch/

What is Asynchronous? javascriptחֶֽ׷ꬊず劍Ⳣ椚הכծ׉ךةأָؙ植㖈ךjavascriptךstack ♳ח㶷㖈ׇ׆ծ㼛勻ךוַֿך儗挿דⱄןstack♳ח䗁䌓ׅ׷Ⳣ椚ד֮׷կ

What is Asynchronous? e e. .g g. . s se et tT Ti im me eo ou ut t setTimeoutꟼ侧כ植㖈ך؝٦ٕأةحؙ♳דㄎן⳿ׁ׸׷הծ䭷㹀ׁ׸׋ 儗꟦דأ؛آُ٦ٕ涫ꐮ׃Ⳣ椚׾穄✪ׅ׷ָծ䭷㹀ׁ׸׋儗꟦ָ穗麓ׅ׷ הծ植㖈ךⳢ椚ךⴖ׸湡ח؝٦ٕغحؙꟼ侧ָㄎן⳿ׁ׸׷կ

Callback ֿך״ֲזꬊず劍ةأؙ׾Ⳣ椚ׅ׷ךחծjavascriptדכꟼ侧ؔـآؙؑز ׾䒷侧ח床ׅ؝٦ٕغحؙ䕎䒭׾⢪׏גְ׋կ someAsyncJob(function() {…}); ֿ׸כꟼ侧㘗鎉铂דכ竰竲床׃הㄎל׸׷׮ךדׅկ

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)})

Promise/A+ ַאגծNodejsהWebךjs׾垥彊⻉׃״ֲה׃׋ծCommonJSהְֲ穈籼 ָ倜׋זꬊず劍Ⳣ椚堣圓׾㹀纏ׅ׷կ ׉ך➿邌涸ז㹋鄲ד֮׷Qך؝٦س Q.fcall(promisedStep1) .then(promisedStep2) .then(promisedStep3) .then(promisedStep4) .then(function (value4) { // Do something with value4 }) .catch(function (error) { // Handle any error from all above steps }) .done();

Promise ׉׃גծאְחEcmascriptחPromiseָ㼪Ⰵׁ׸׷ const p = new Promise((resolve, reject) => { setTimeout(() => resolve('hello')); }); p.then(word => console.log(word));

Problems ׋׌ծPromiseָ؝٦ٕغحؙך㉏겗挿׾ׅץג鍑寸׃׋הכ鎉ְꨇְկ 穠㽷䕎׾㢌ִ׋؝٦ٕغحؙ䕎䒭ד׃ַזְךדծ؝٦سָ醱꧟חז׷הծ ּׅ鋅ב׵ֻז׷կ const p = new Promise(resolve => { setTimeout(() => resolve('hello')); }) p.then(word => { setTimeout(() => resolve(`${word} world`)); }) .then(word => console.log(word));

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));

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}`) }

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); }

➙וֲׅץַֹ 植㖈ך؝٦س׾؝٦ٕغحؙ䕎䒭ד剅ְגְ׷㜥さծ׉׸כּׅװ׭״ֲկ ꬊ䌢ח؝٦س׾أ؛٦ׇׁٕ׷ךָꨇ׃ֻז׷׃ծغؚך庛䎮חז׷կ •  Babel٥typescript׾ⵃ欽׃גְ׷ז׵async٥await׾⢪ְת׃׳ֲկ •  稆ךJSז׵Bluebird׾㼪Ⰵׅ׷կ •  㢩鿇ךٓ؎ـָٓٔ⢪ִזְז׵知僒Promise׾㹋鄲ׅ׷կ https://gist.github.com/brn/4f639a5bdb845f0aebe8e0725691a442