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