パソコンでは動いた。
KAZU「完成！」
ところがiPhoneで試すと、思ったように動かない。
KAZU「さっき完成したところなんだけど。」
API「別の環境でも確認できて、よかったですね。」
KAZU「励ましの角度が独特だね。」
通信する機能では、自分のコードだけでなく、ネットワークや相手のサービス、ブラウザの制約なども関わる。動かない原因がAPIとは限らない。ボタンの処理や画面の更新に問題がある場合もある。
だから、「APIが悪い」と決める前に、どこまで進んだかを確かめたい。
ボタンは反応したか。通信は送られたか。返事は来たか。受け取ったデータを表示できたか。
KAZU「道路が悪いと思ったら、玄関のドアが開いていないこともあるのか。」
API「あります。」
そして、原因を直すだけでなく、失敗したときの動きも用意する。
次の例は、前回と同じ窓口が存在する前提だ。
async function loadExample() {
try {
const response = await fetch("/api/example");
if (!response.ok) {
throw new Error(
`HTTPエラー: ${response.status}`
);
}
const data = await response.json();
console.log("取得できました", data);
} catch (error) {
console.error("取得できませんでした", error);
}
}
loadExample();HTTPエラーとは、通信先のサーバーからHTTPの返事が届いたものの、その返事が「処理を完了できなかった」ことを示している状態だ。たとえば、指定したページが見つからないときは404、サーバー側で問題が起きたときは500になる。
response.ok は、返事が成功扱いかどうかを確認するための値だ。ステータスが200番台なら通常は true、404や500のようなHTTPエラーなら false になる。
ただし、response.ok が false になっただけでは、catch へ自動的に移るわけではない。そこで throw new Error(...) を使い、こちらから「これは失敗として扱います」と知らせる。
throw は、問題が起きたことを知らせて、通常の処理を中断する指示だ。たとえるなら、受付で「この依頼は処理できません」と分かった時点で、次の作業を止め、非常口へ案内するようなものだ。
try の中で処理を行い、そこで起きた例外を catch で受け止める。例外とは、プログラムの途中で起きた予想外の問題を知らせる仕組みである。
たとえば、JSONではなく壊れた文字列が返ってきた場合、response.json() の読み取りに失敗して例外が起きる。ネットワーク自体に問題がある場合も、fetch() が例外になることがある。catch があれば、こうした問題を受け止め、エラー表示へ進められる。