fetch呼び出しでasync/awaitを使わないパターン、使うパターン

# 目的
fetchを呼び出す際にasync/awaitを使うパターンと使わないパターンをまとめます。
もっとこう書くとスマートだとか、この処理忘れてるとかあったらコメントでご指摘ください。

# Promiseのまま扱うパターン
```javascript:エラー処理を考えないシンプルなパターン
// Promiseのまま扱う際のfetchの使い方
function fetchNormal(){
  // 気象庁の今日の東京の天気API(JSON)
  const url = 'https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json';
  
  const promise = fetch(url);
  promise
    .then(response => response.json())
    .then(jsondata => {
        showResult("result: " + JSON.stringify(jsondata));
    });
}
```
## ポイント

- fetchの戻り値はPromiseです。
- Promiseは、fetch呼び出しの直後に（urlへの非同期通信が完了する前に）戻されます。
- その戻り値のPromiseに対して.then(response => response.json())を呼び出します。
- 最初のPromiseはまだ完了していませんので、これは「fetchが終わったらresponse=>response.json()を実行してね」という意味になります。
- そしてそのthen()の戻り値もまたPromiseです。このPromiseもまだ終わっていません。
- response.json()のPromiseが完了したら、jsondata => {...}が実行されます。
- 大事なことは、fetchNormal()の呼び出し自体は一瞬で完了するという点です。

```javascript:エラー処理を含むパターン
// 通常のfetchの使い方
function fetchNormal(){
  // 気象庁の今日の東京の天気API(JSON)
  const url = 'https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json';
  //const url = 'http://abc'; // TypeError: Failed to fetch
  //const url = 'abc'; // status=404
  //const url = ''; // status=200 & undefined json.
  
  const promise = fetch(url);
  promise
    .then(response => {
      // レスポンスステータスのチェック。200以外でもresponseが返ればここへ来る。ネットワークエラー等の場合、then()にはこないでcatch()へ行く。
      if (!response.ok) {
        // 200以外ならばエラーメッセージを投げる
        throw new Error(`response.status = ${response.status}, response.statusText = ${response.statusText}`);
      }
    
      return response.json(); // jsonデータの取得結果をPromiseで返す。
    })
    .then(jsondata => {
      showResult("result: " + JSON.stringify(jsondata));
    }).catch(err => { 
      showResult("err: " + err);
    }); 
}
```
## ポイント

- thenの呼び出しをチェーンできます。
- 例外はcatchメソッドで受けます。

# async/awaitを使うパターン
```javascript:エラー処理を考えないシンプルなパターン
// async/awaitを使ったfetchの使い方
async function fetchAsync(){
  // 気象庁の今日の福井の天気API(JSON)
  const url = '';//'https://www.jma.go.jp/bosai/forecast/data/overview_forecast/180000.json';
  
  const response = await fetch(url);
  const jsondata = await response.json();
  showResult("result : " + JSON.stringify(jsondata));
}
```

## ポイント

- fetch(url)の結果（Promise）をawaitしているので、実際にレスポンスが返るまでこれ以降の処理は保留されます。
- しかし、実際にはfetchAsync()の呼び出しはここで一旦終了し、未完了のPromiseが返されています。
- fetch(url)の結果のレスポンスが返るとresponseにレスポンスオブジェクトが格納されます。
- 次にresponse.json()を実行します。この結果もPromiseであり、awaitしているので、jsonデータを生成するまでこれ以降の処理は保留されます。
- 何度も言いますが、とっくにfetchAsync()自体の呼び出しは終了しており、呼び出し元の後続の処理が実行されています。ここで処理が保留されているのはJavascriptエンジンの魔法であり、ここで処理がブロックされているわけではありません。詳しくは[この記事](https://qiita.com/jun1s/items/ecf6965398e00b246249)をどうぞ。
- respon.json()の処理が完了し、結果がjsondataに格納されます。
- jsondataを表示します。
- then()の連結よりも、順番に処理が実行されることが明確に分かりやすくなっています。


```javascript:エラー処理を含むパターン
// async/awaitを使ったfetchの使い方
async function fetchAsync(){
  // 気象庁の今日の福井の天気API(JSON)
  const url = '';//'https://www.jma.go.jp/bosai/forecast/data/overview_forecast/180000.json';
  //const url = 'abc'; // status=404 Not Found
  //const url = ''; // status=200 & undefined json.
  //const url = 'http://google.com'; // TypeError: Failed to fetch (CORS制約)
  
  try {
    const response = await fetch(url);
    if (!response.ok) {
      // OK以外ならばエラーメッセージを投げる
      throw new Error(`response.status = ${response.status}, response.statusText = ${response.statusText}`);
    } 
    
    const jsondata = await response.json();
    showResult("result : " + JSON.stringify(jsondata));
  }
  catch (err) {
    showResult("err: " + err);
  }
}
```

## ポイント

- 発生した例外は通常のtry-carch構文でキャッチできます。

#サンプルソース
https://codepen.io/jun1sfukui/pen/jOwaoGq?editors=0011