2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-03-12

初めに

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やそれぞれのプログラムに合わせて実装を変える必要がある。

参考サイト

2
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?