Fetch APIでデーターを取得しながらPromiseとasyc/awaitを学んだまとめ

# シンプルな例で2つの書き方をまとめる

[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function)などのリファレンスはとても参考になるのですが、例題が少し難しく感じる・・・ということで、シンプルにPromiseとAsync/Awaitの記法をメモしておきます。

便利な**[jsonplaceholder](https://jsonplaceholder.typicode.com)**を使ってサンプルを作成します。

## Promise

```javascript

fetch('https://jsonplaceholder.typicode.com/photos')
  .then(response => response.json())
  .then(postDate => console.log(postDate))
  .catch(err => console.error(err));
```

Chrome Developerツールを開いて、上記をconsoleへコピペすると、データが取得できる。5000件も！

**おまけ**
取り扱いが大変な時は、`slice`を使って、件数を制限することも可能。
(sliceなどのシンタックスを覚えるのは簡単ですが、どのような場面で使えるのかという視点をなかなか持てなかったので、知った時は結構嬉しかったですw・・・)

fetch()の結果はPromiseで返されます。

```javascript

fetch('https://jsonplaceholder.typicode.com/photos')
  .then(response => response.json())
  .then(postsDate => console.log(postsDate.slice(0, 50))) // 50件のみ表示
  .catch(err => console.error(err));
```


## async/ await

次にES8で登場したasync/awaitを使ったfetchのしかた。

```javascript
const getPostData = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/photos');
  const postsData = await response.json();
  console.log(postsData);
};

getPostData();
```
`アロー関数`の場合、asyncをどこに書くべきかわからなかったのですが、何パターンか書き方を見ると、置き場所がわかるかと思います。

```javascript
// ES5
async function getPostData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/photos');
  const postsData = await response.json();
  console.log(postsData);
}

getPostData();


const getPostData = async function () {
  // 省略
}

// アロー関数
const getPostData = async () => {
  // 省略
}
```
**"function"の前にasync!!!**


### エラー

fetchを使う時は`.catch(err)`でエラー処理を書けるのですが、async/awaitの時は・・・・？？

`trycatch`を使います！

```javascript
const getPostData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/photos');
    const postsData = await response.json();
    console.log(postsData);
  } catch (err) {
    console.error(err);
  }
};

getPostData();
```
`catch (err) { /* ここにエラー時の処理を */ }`


## もっとサンプル（2019/7/19追記）

### Promiseベースのfetch
```javascript

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(users => {
    const firstUser = users[0];
    console.log(firstUser);
    return fetch(
      'https://jsonplaceholder.typicode.com/posts?userId=' + firstUser.id
    );
  })
  .then(response => response.json())
  .then(posts => console.log(posts));
  .catch(err => console.log(err));

```
今回はまずユーザー情報を取得し、その後UserIdに基づいたpostを取得している例です。


### Async/Awaitでのfetch
```javascript
const myAsyncFunction = async () => {
  try {
    const usersResponse = await fetch(
      'https://jsonplaceholder.typicode.com/users'
    ); 
    const users = await usersResponse.json();
    const secondUser = users[1];
    console.log(secondUser);
    const postResponse = await fetch(
      'https://jsonplaceholder.typicode.com/posts?userId=' + secondUser.id
    );
    const posts = await postResponse.json();
    console.log(posts);
  } catch (err) {
    console.log('There was an error', err);
  }
};
```
基本的に`await`とは日本語で**「待つ」**という意味なので、

「fetchでデータが取得できるまで待ちましょう」
「取得できたらjsonに変換しましょう」という流れをあたかもSyncronousな文法で書けてしまうのがAsync/Awaitですね。



## 感想

Node, Express, MongoDBの勉強をしている際、データベースとのやりとりでasync/awaitが多用されていました。

asyncは慣れると読みやすいし、書きやすいのですが、**いつ使うのか**を判断するのがなかなか難しいかったです。

ある程度はパターンなのかもしれませんが、**一つの処理に時間がかかってその他の処理が止まってしまうのを防ぐために並行処理を行う**ようなので、その視点を持って書いてみようと思います。