JavaScriptでGETリクエストを送信する方法：Fetch APIの使い方を徹底解説

開発業務では、自社のAPIやサードパーティのAPIからデータを取得する場面が頻繁にあります。本記事では、ブラウザに標準搭載されているFetch APIを使って、エンドポイントからGETリクエストでデータを取得する方法を詳しく解説します。

Fetch APIとは？

Fetch APIは、ChromeやFirefoxなどのWebブラウザからサーバーへHTTPリクエストを送信するためのインターフェースです。GETリクエストを送ると、サーバー上の指定したエンドポイントにアクセスし、そのエンドポイントが持つデータを含むレスポンスを受け取ることができます。

HTTPリクエストの種類

GETリクエストは、サーバーに対して送れるリクエストの一種にすぎません。その他にもPOST、PUT、DELETEといったリクエストがあります。これらを組み合わせることで、いわゆるCRUDアプリケーションが実現できます。CRUDとは、データベース内のデータに対して「作成（Create：POST）」「読み取り（Read：GET）」「更新（Update：PUT）」「削除（Delete：DELETE）」の4つの操作を行うことです。

また、サードパーティのAPIのエンドポイントにリクエストを送ることも可能です。ただし、APIによっては実行できるリクエストの種類が制限されている場合があります。これは主にデータの不変性を保つためで、データを操作する系のリクエストは許可されず、読み取りのみが許可されることが多いです。

Fetch APIの仕組み

Fetch APIはPromiseベースの通信システムを採用しています。おさらいとして、Promiseとは非同期処理のロジックをコードブロック内にカプセル化し、処理が成功したか失敗したかを示す結果を返す非同期関数のことです。

Fetch APIを利用する開発者は、Promiseのロジックそのものを書く必要はありません。リクエストを送信するだけで、内部で自動的にPromiseが返されます。レスポンスを取得するための基本的な構文は以下の通りです。

promise.then(response).then(json).catch(error);

ここでのpromiseは実際の非同期リクエストを指します。fetch()メソッドはグローバルスコープで利用可能で、引数としてHTTPリクエストを送りたいエンドポイントのURLを渡します。

let promise = fetch("https://swapi.dev/api/films/1");

リクエスト送信後、thenとcatchを使ったPromise構文でも、async/await関数を使っても、サーバーからのレスポンスを取得できます。それぞれの方法を見ていきましょう。

Promise構文を使った実装例

promise.then(response => {
       if (response.status !== 200) {
           console.log('Looks like there was a problem. Status Code: ' +
             response.status);
           return;
       }
           response.json().then(data => {
               console.log(data);
           }).catch(error => {
               console.log(error.message);
           })
     })

このコードでは、まずPromiseを受け取り、レスポンスを待ちます。レスポンスを受け取った際、ステータスコードが200以外であれば、エラーコードをコンソールに出力して処理を終了します。

ステータスコードが200の場合は、フロントエンドで扱えるようにするため、json()メソッドを使ってレスポンスをJavaScript Object Notation（JSON）オブジェクトに変換します。この処理を先に完了させてから次に進みたいので、前のPromiseに新しいPromiseをチェーン（連結）しています。

評価が完了したら、渡されたデータをコンソールに出力して確認できます。実際に試すと、以下のような出力が得られます。

{
       title: 'A New Hope',
       episode_id: 4,
       opening_crawl: 'It is a period of civil war...',
       director: 'George Lucas',
       producer: 'Gary Kurtz, Rick McCallum',
       release_date: '1977-05-25',
       characters: [
         'https://swapi.dev/api/people/1/',
         'https://swapi.dev/api/people/2/',
         ...
       ],
       planets: [
         'https://swapi.dev/api/planets/1/',
         'https://swapi.dev/api/planets/2/',
         'https://swapi.dev/api/planets/3/'
       ],
       starships: [
         'https://swapi.dev/api/starships/2/',
         'https://swapi.dev/api/starships/3/',
         ...
       ],
       vehicles: [
         'https://swapi.dev/api/vehicles/4/',
         ...
       ],
       species: [
         'https://swapi.dev/api/species/1/',
         ...
       ],
       created: '2014-12-10T14:23:31.880000Z',
       edited: '2014-12-20T19:49:45.256000Z',
       url: 'https://swapi.dev/api/films/1/'
     }

このような情報をフロントエンドで取得できれば、カード形式やテーブル形式など、好きな方法で画面に表示できます。

Async/Awaitを使った実装例

同じ結果は、async/await関数を使っても得られます。

let getRequest = async () => {
   try {
       let fetched = await fetch("https://swapi.dev/api/films/1");
       if(fetched) {
           let read = await fetched.json()
           console.log(read);
           return read;
       }
   }
   catch (error) {
       throw new Error(error.message);
   }
}
 
getRequest()

asyncキーワードは、この関数の一部が非同期であることを示します。awaitキーワードに到達すると、その行のコードの評価が完了するまでスクリプトの実行が一時停止します。

この関数には2つのawait文があり、Promise構文における2つのthen()文に相当します。1つ目は、渡したURLからのフェッチ（データ取得）が完了するのを待ち、2つ目は、取得した情報がJSONへパースされるのを待ちます。また、try/catchを使うことで、レスポンスから予期しないものが返ってきた場合のエラーも捕捉できます。

まとめと注意点

Fetch APIはブラウザ環境専用のため、Visual Studio CodeなどのIDEでNode.js環境を使用している場合は、yarn add node-fetchまたはnpm install node-fetchを実行してnode-fetchライブラリを導入する必要があります。

Fetch APIをマスターすれば、外部APIとの連携や動的なWebアプリケーション開発がぐっと容易になります。Promise構文とasync/awaitの両方を理解しておくと、状況に応じて最適な書き方を選択できるようになるでしょう。