ひどうきプログラミング

非同期プログラミングとは?

プログラミングコードは順番に実行できません.
ページ全体のプログラミングをレンダリングせずに、必要な部分だけを更新します.

XHRとPromise

基本的なAJAX通信技術はXMLHTTPRequestを使用したことがある.
その後、jqueryの出現によりAJAXはブラウザの使用/スパンなどの面で便利になり、符号化方式はイベントベースでコールバック関数を通過する方式となった.
しかし,コールバック関数方式はコールバックにおいてコールバック地獄問題が存在し,次いでXMLTTPRequest(コールバック方式)の代わりにPromiseオブジェクトによって置き換えられる.
Fetch APIはPromiseベースです.
現在、Fetch apiライブラリの一つであるAxiosライブラリが有名です.
(Promiseは同期関数、そして非同期)

ASYNC/AWAIT

既存の非同期コードの実行順序を保証するには、コールバック関数またはthen関数を使用する必要がありますが、async/awaitは短いキーワードを使用して実行順序を保証します.

async/awaitを適用する前に

function prom(that, sec) {
    return new Promise(function(resolve, reject){
        setTimeout(function() {
            console.log(that)
            resolve('data')
        },sec)
    } )
};

function test1() {
    console.log(prom(1, 2000))
    console.log(prom(2, 4000))
    console.log(prom(3, 1000))
}
test1()

결과
// Promise {<pending>}
// 3
// 1
// 2

async/awaitを適用した後

function prom(that, sec) {
    return new Promise(function(resolve, reject){
        setTimeout(function() {
            console.log(that)
            resolve('data')
        },sec)
    } )
};

async function test1 () {
    await prom(1, 2000)
    await prom(2, 3000)
    await prom(3, 1000)
}
test1()

결과
// Promise {<pending>}
// 1
// 2
// 3