【JavaScript】非同期処理を行うfetchについて初心者向けにまとめてみた

今回は、JavaScriptの非同期処理におけるfetchについて初心者向けに解説したいと思います。英単語の意味からも何を行うメソッドかおおよその判断がつくとは思いますが、ぜひこの機会に意味と使い方をしっかりと理解しておきましょう。

Fetchを直訳すると「取ってくる」「読み込む」という意味になります。

この記事の内容

はじめに
fetchとは
Fetch APIとは
fetch()メソッドとは
Promiseとは
fetchの使い方
まとめ
参考

はじめに

この記事を読んでいる皆さんは、以下のような「fetch→then→catch」という流れのコードを見かけたことはありませんでしょうか？

fetch("https://www.omdbapi.com/?s=man&apikey=4a3b711b")
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log("失敗しました");
});

これが今回解説するfetchのサンプルコードになります。

fetchとは

フェッチとは、取りに行く、取ってくる、持ってくる、連れてくる、来させる、呼び出す、引き出す、惹きつける、などの意味を持つ英単語。ITの分野では機器やプログラムなどが特定の場所からデータなどを読み出す動作のことを指すことが多い。

参考：IT用語辞典

何かしらのデータを取得することをfetchと呼びます。

Fetch APIとは

Fetch APIとは、ページの外部からリソースを取得するためのインターフェースを定義した、Webブラウザの標準APIです。 Fetch APIは fetch関数など、リソースを取得するためのAPIを定義しています。

参考：【JavaScript基礎】Fetch APIの基礎

簡単に言うと、Fetch APIを介すことで外部のデータを取得する(≒ fetchする)ことができます。

fetch()メソッドとは

それでは、JavaScriptにおけるfetch()メソッドについて見ていきましょう。

fetch()メソッドとは、非同期でサーバー上にあるデータを取得することができるメソッドです。具体的に言うと、非同期でリクエストを発行し、そのレスポンスを取得するということになります。

皆さんが普段見ているWebページは以下のような流れで表示されていますが、これは同期通信(≒ HTTP通信)の場合です。

fetch()メソッドはこれらの処理を非同期で行なってくれるということになります。

Promiseとは

ここでもう一つ理解しておかなければならない用語があります。

それがPromise(プロミス)です。

Promiseとは、非同期処理が成功したか失敗したかという状態を表すオブジェクトです。

これがあることにより、非同期処理が成功した場合の処理コード、失敗した場合の処理コードという感じで分けて記述することができます。

PromiseとはJavaScriptにおいて、非同期処理の操作が完了したときに結果を返すものです。

参考：TECH PLAY

jQueryを触っていたことがある人は、doneとfailと同じということが分かるね。

fetchはPromiseベースで値を返してくれるということを頭に入れておきましょう。

fetchの使い方

ここからはfetchの基本的な使い方について見ていきます。

まずはリクエストの発行です。今回は映画情報を取得できるAPIを利用してみます。

fetch("https://www.omdbapi.com/?s=man&apikey=4a3b711b")

これをChromeのデベロッパーツールで確認してみると、以下のようにPromiseベースになっていることが見て分かります。

Promiseベースでは、処理が成功した場合と失敗した場合を分けて記述しなければなりませんでしたね。以下のように編集してみましょう。

fetch("https://www.omdbapi.com/?s=man&apikey=4a3b711b")
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log("失敗しました");
});

非同期処理が成功した場合はthen、失敗した場合はcatchを実行します。

これで、処理が成功した場合はそのデータの中身を見ることができるようになりました。

今回ではJSON形式でデータを受け取っていますが、この他にも以下のように様々なデータ形式での受取りが可能なことを頭に入れておきましょう。