JavaScript GETリクエスト：FetchAPIの使用

多くの場合、開発者は独自のAPIまたはサードパーティのAPIからデータを取得する必要があります。この記事では、ブラウザのFetchAPIを使用してエンドポイントからデータを取得する方法について説明します。

Fetch APIとは何ですか？

Fetch APIは、ChromeやFirefoxなどのウェブブラウザからサーバーにHTTPリクエストを送信できるようにするインターフェースです。 GETリクエストがサーバー上のエンドポイントにヒットすると、そのエンドポイントからのデータを含む応答が返されるため、データを読み取ることができます。

リクエストの種類

GET HTTPリクエストは、サーバーに対して行うことができるリクエストの1つのタイプにすぎません。他のタイプの要求は、POST、PUT、およびDELETEです。これらのリクエストはCRUDアプリケーションを作成します。ここで、データベース内のデータを作成（POST）、読み取り（GET）、更新（PUT）、および破棄（DELETE）できます。

さらに、サードパーティのAPIでエンドポイントにアクセスできます。 APIによっては、主にデータを不変に保つために特定のリクエストのみを実行できるため、データを操作するリクエストを実行することはできず、データを読み取ることしかできません。

Fetch APIはどのように機能しますか？

Fetch APIは、Promiseベースの通信システムを使用します。念のため、Promiseは、ロジックをコードブロックにカプセル化し、Promiseが解決されたか拒否されたかを判断する応答を返す非同期関数です。

Fetch APIのユーザーとして、promiseロジックを実際に作成する必要はありません。リクエストを送信するためにそれを使用する必要があり、FetchAPIは内部でpromiseを返します。応答を取得できるようにするための基本的な構文は次のとおりです。

promise.then（response）.then（json）.catch（error）;

約束は実際の非同期リクエストです。 fetch() メソッドはグローバルスコープで使用可能であり、HTTPリクエストを送信するエンドポイントに渡されます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

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

リクエスト後、thenでpromise構文を使用してcatchするか、async/await関数を使用してサーバーの応答を取得できます。

約束の構文

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);
           })
 
 
      
     })

ここで約束を取り、応答を待ちます。応答を受け取ったときに、ステータスコードが200以外の場合は、エラーコードをコンソールに記録し、関数を終了します。

それ以外の場合は、フロントエンドWebサイトで使用できるように応答を読み取り可能にするために、json()を使用して応答をJavaScriptObject Notation（JSON）オブジェクトに変更します。 方法。先に進む前にこれを最初に評価したいので、前の約束に約束をつなぎます。

それが評価されたら、渡されたものをログに記録して、コンソールに表示できます。フォローしている場合は、次のようなものを取得する必要があります。

{
       title: 'A New Hope',
       episode_id: 4,
       opening_crawl: 'It is a period of civil war.\r\n' +
         'Rebel spaceships, striking\r\n' +
         'from a hidden base, have won\r\n' +
         'their first victory against\r\n' +
         'the evil Galactic Empire.\r\n' +
         '\r\n' +
         'During the battle, Rebel\r\n' +
         'spies managed to steal secret\r\n' +
         "plans to the Empire's\r\n" +
         'ultimate weapon, the DEATH\r\n' +
         'STAR, an armored space\r\n' +
         'station with enough power\r\n' +
         'to destroy an entire planet.\r\n' +
         '\r\n' +
         "Pursued by the Empire's\r\n" +
         'sinister agents, Princess\r\n' +
         'Leia races home aboard her\r\n' +
         'starship, custodian of the\r\n' +
         'stolen plans that can save her\r\n' +
         'people and restore\r\n' +
         'freedom to the galaxy....',
       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/',
         'https://swapi.dev/api/people/3/',
         'https://swapi.dev/api/people/4/',
         'https://swapi.dev/api/people/5/',
         'https://swapi.dev/api/people/6/',
         'https://swapi.dev/api/people/7/',
         'https://swapi.dev/api/people/8/',
         'https://swapi.dev/api/people/9/',
         'https://swapi.dev/api/people/10/',
         'https://swapi.dev/api/people/12/',
         'https://swapi.dev/api/people/13/',
         'https://swapi.dev/api/people/14/',
         'https://swapi.dev/api/people/15/',
         'https://swapi.dev/api/people/16/',
         'https://swapi.dev/api/people/18/',
         'https://swapi.dev/api/people/19/',
         'https://swapi.dev/api/people/81/'
       ],
       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/',
         'https://swapi.dev/api/starships/5/',
         'https://swapi.dev/api/starships/9/',
         'https://swapi.dev/api/starships/10/',
         'https://swapi.dev/api/starships/11/',
         'https://swapi.dev/api/starships/12/',
         'https://swapi.dev/api/starships/13/'
       ],
       vehicles: [
         'https://swapi.dev/api/vehicles/4/',
         'https://swapi.dev/api/vehicles/6/',
         'https://swapi.dev/api/vehicles/7/',
         'https://swapi.dev/api/vehicles/8/'
       ],
       species: [
         'https://swapi.dev/api/species/1/',
         'https://swapi.dev/api/species/2/',
         'https://swapi.dev/api/species/3/',
         'https://swapi.dev/api/species/4/',
         'https://swapi.dev/api/species/5/'
       ],
       created: '2014-12-10T14:23:31.880000Z',
       edited: '2014-12-20T19:49:45.256000Z',
       url: 'https://swapi.dev/api/films/1/'
     }

フロントエンドでこの情報を取得すると、それを使用してカードやテーブルにデータを入力したり、表示したりすることができます。

非同期/待機

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があります この関数のステートメント。2つのthen()に相当します。 約束の論理で私たちが持っていたステートメント。 1つのステートメントは、渡したURLでフェッチが行われるのを待機し、もう1つのステートメントは、フェッチされた情報がJSONに解析されるまで待機します。 try/catchを使用します 応答から何か異常が戻ってきた場合に発生する可能性のあるエラーをキャッチするため。

最終メモ

Fetch APIをノード環境で機能させるには（つまり、Visual Studio CodeなどのIDEを使用している場合）、yarn addを実行する必要があります。 またはnpm install node-fetch 、フェッチはブラウザ環境でのみ機能するため。