JavaScriptにてfetchの処理をPromiseからasync/awaitに書き換えたい

Question

前提・実現したいこと

####質問１
JavaScriptにて
以下のPromiseの処理をasync/awaitに書き換えたいのですが、
記法は合っているでしょうか?

■ コード1

fetch("URL", {
  method: "GET",
})
  .then((response) => {
    // サーバ側エラーを検査
    if (!response.ok) {
      throw new Error(response.status);
    } else {
      return response.json();
    }
  })
  .then((json) => {
    console.log(json);
  })
  // そもそもこれって何をキャッチしているのでしょう？
  .catch((e) => {
    console.error(e);
  });

■ コード2

(async () => {
  const response = await fetch("URL", { method: "GET" });
  if (!response.ok) {
    throw new Error(response.status);
  } else {
    const json = await response.json();
    console.log(json);
  }
})();

また、catchの処理はどこに書くのが適切なのでしょう?
この部分かな?と思ったのですが上手くエラーを起こせず確認できずにいます。。

  const response = await fetch("URL", { method: "GET" }).catch((e) => {console.error(e)});

####質問2
fetchはサーバ側のエラーを検知しないのでresponse.okの値を見る必要がある
と以前教わったのですが、そうなるとこの部分のcatchは何をキャッチしているのでしょう?
####質問3
そもそもなのですが、asyncとawaitはそれぞれ端的に言うとどう説明すればよいのでしょう。
新人に質問されたのですが、簡単に伝わる言い方が思いつかず、皆様のお力をお借りしたいです。

Answer 1

(async()=>{
  const url="・・・";
  const res=await fetch(url);
  let json;
  try{
    if(res.ok){
      json=await res.json();
    }else{
      throw new Error(res.status);
    }
  }catch(e){
    console.error(e);
  }
  console.log(json);
})();

asyncはpromiseを同期的に処理するための構文で
asyncな処理をawaitは同期・非同期の切り替える処理です

Comments

[change]

ありがとうございます。
`try~catch`を使う必要があるのですね。

ちなみになのですが、このcatchは何をcatchすることがあるのでしょう。

頂いたコードが■ コード1と同じ処理だとすると、
対象となるコードが` json=await res.json();`のみに見えるので、
jsonへの変換失敗・・・以外ないような気がしています。

このcatchってそもそも必要なのでしょうか・・・？
調べるとcatch処理がくっついていることが多かったので気になりました

[yambejp]

catchは例外処理を受け取る処理なので、活用する気がないなら不要です

[change]

ありがとうございました。理解できました