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

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

MDNなどのリファレンスはとても参考になるのですが、例題が少し難しく感じる・・・ということで、シンプルにPromiseとAsync/Awaitの記法をメモしておきます。

便利な**jsonplaceholder**を使ってサンプルを作成します。

Promise

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で返されます。

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のしかた。

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

getPostData();

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

// 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を使います！

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

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

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は慣れると読みやすいし、書きやすいのですが、いつ使うのかを判断するのがなかなか難しいかったです。

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