diadia

興味があることをやってみる。自分のメモを残しておきます。

thenとasync awaitを比較してみた

Javascript

javascriptで非同期処理を行う場合にcallbackを使用してきた歴史がある。しかし非同期処理を使う際にcallbackを多用する場合がありコードが読みにくくなる問題が生じた。
こうした背景のもと問題解決のためPromiseという概念を発明した。

then, async awaitはこのPromiseオブジェクトに対して非同期処理の細かな制御を実現するために使うツールだと今のところ認識している。

どちらの方法でも非同期処理を制御できるけれども両者を比較したことがなかったが今回比較した。 自分の進歩を残すという趣旨で記録しているのでこの件もメモとしてのこす。

thenを使うケース

const axios = require('axios');

function createClient() {
    const client = axios.create({
            baseURL: 'https://api.coindesk.com',
            responseType: 'json'
    });
    console.log("clientを作成")
    return client
}

function getData() {
    const client = createClient();
    console.log("getData()内のrequest前のコンソールログ")
    // https://jp.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html
    let chartName = null;
    client.get(url = '/v1/bpi/currentprice.json').then((response) => {
        chartName = response.data["chartName"]
        console.log(chartName)
        console.log("getData()内にあるthen内のchartName取得後のコンソールログ")
    })
    console.log("getData()内のrequest後のコンソールログ", chartName)
}


// // コードを実行
console.log("getData()前のコンソールログ")
getData();
console.log("getData()後のコンソールログ")

// 結果
getData()前のコンソールログ
clientを作成
getData()内のrequest前のコンソールログ
getData()内のrequest後のコンソールログ null
getData()後のコンソールログ
Bitcoin
getData()内にあるthen内のchartName取得後のコンソールログ

thenを使うケースにおける非同期処理のポイント

非同期処理、例えば通信後のデータを使って何かロジックを組み立てる処理には、必ずthenのスコープ内でものを書いていく必要がある。

thenを使うケースにおける同期処理の優先順位

同期処理の優先順位つまり非同期処理を除いたロジックの流れは、以下の流れになると推測する。

非同期処理を含む関数(getData)では非同期処理以外(thenスコープ外)の命令が上から順番に実行される。これでgetDataが終わったとみなされ、その後に続く関数console.log("getData()後のコンソールログ")が実行される。getData内の非同期処理は同期処理とは無関係に、（マイペースに、）非同期処理の原因となる遅い処理が終わると、その後に続く処理console.log(chartName)や console.log("getData()内にあるthen内のchartName取得後のコンソールログ")が実行されていく。

async, awaitのケース

const axios = require('axios');


function createClient() {
    const client = axios.create({
            baseURL: 'https://api.coindesk.com',
            responseType: 'json'
    });
    console.log("clientを作成")
    return client
}
 
async function getData() {
    const client = createClient();
    console.log("getData()内のrequest前のコンソールログ")
    // https://jp.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html
    const response = await client.get(url = '/v1/bpi/currentprice.json')
    const chartName = response.data["chartName"]
    console.log(chartName)
    console.log("getData()内のrequest後のコンソールログ")
};

// コードを実行
console.log("getData()前のコンソールログ")
getData();
console.log("getData()後のコンソールログ")

// 結果
getData()前のコンソールログ
clientを作成
getData()内のrequest前のコンソールログ
getData()後のコンソールログ
Bitcoin
getData()内のrequest後のコンソールログ

async, awitを使うケースにおける非同期処理のポイント

thenの場合ではthen内の処理がすべて非同期になるのに対し、async, awaitのケースの場合asyncがついた関数の処理すべてが非同期になるわけではない感じがする。async内のawait以降に書かれる処理がすべて非同期になり、await以前は同期処理扱いになるのではないかと推定する。

Inside the async function we can use await. JavaScript will know to execute the rest of the code only after the awaited function is resolved.

Promises in JavaScript: Explained for Kids | by ALEXANDRU TAPIRDEA | Apr, 2021 | Level Up Coding