【Javascript】2種類の方法でAPIを叩いてみた。（async/then）

初めに

javascriptでAPIを叩いてみた。非同期通信が難しかったが、なんとか完全に理解したので、サンプルコードを残しておく。

非同期通信とは、通常のスクリプトでの常識である「上から順に処理を行う」を逸脱した通信のこと。考慮しないと変数にまだ何も入っていないのに、次の処理が行われてしまう可能性がある。
そこで、「awat」や「then」を用いて処理を待つ。
※非同期通信にはユーザーの待ち時間を減らすメリットがある。

環境

• MacOS 12.0.1
• Google Chrome 99.0
• APIはJSONで帰ってくる想定

サンプルコード

asyncを使用した例

async_api.js

//async awaitの例
const url = "アクセスしたいURL";
async function call_api(url) {
  const request = await fetch(url);
  const json_data = await request.json();
  //JSONを受け取ってからしたい処理
  console.log(json_data);
}

callApi(url);

thenを使用した例

then_api.js

//thenの例
const url = "アクセスしたいURL";
function call_api(url) {
  fetch(url)
    .then(function (response) {
      return response.json();
    })
    .then(function (json_data) {
     //JSONを受け取ってからしたい処理
      console.log(json_data);
    });
}
callApi(url);

終わりに

ここまではAPIを叩くための準備段階のため、叩きたいAPIやそれぞれのプログラムに合わせて実装を変える必要がある。

参考サイト