FetchAPIを使用してHTTPリクエストを実行する方法に関する実用的なES6ガイド

プログラミング

このガイドでは、Fetch API（ES6 +）を使用してREST APIへのHTTPリクエストを実行する方法と、遭遇する可能性が最も高いいくつかの実用的な例を示します。

HTTPの例をすぐに見たいですか？セクション5に進みます。最初の部分では、HTTPリクエストを処理するときのJavaScriptの非同期部分について説明します。

注：すべての例は、矢印関数を使用してES6で記述されています。

今日の現在のWeb /モバイルアプリケーションの一般的なパターンは、サーバーから何らかのデータ（ユーザー、投稿、コメント、サブスクリプション、支払いなど）を要求または表示し、CRUDを使用してそれを操作することです（作成、読み取り、更新または削除）操作。

さらにリソースを操作するために、私たちはしばしばのようなこれらのJS方法（推奨）を使用する.map()、.filter()と.reduce()。

より優れたWeb開発者になりたい、自分のビジネスを始めたい、他の人に教えたい、または開発スキルを向上させたい場合は、最新のWeb開発言語に関するヒントとコツを毎週投稿します。

これが私たちが取り組むことです

  1. JSの非同期HTTPリクエストの処理
  2. AJAXとは何ですか？
  3. なぜAPIをフェッチするのですか？
  4. FetchAPIの簡単な紹介
  5. Fetch API-CRUDの例←良いもの！

1.JSの非同期HTTPリクエストの処理

JavaScript（JS）がどのように機能するかを理解する上で最も難しい部分の1つは、非同期リクエストの処理方法を理解することです。これには、promiseとコールバックがどのように機能するかを理解する必要があります。

ほとんどのプログラミング言語では、操作が順番に（順番に）行われると考えるようになっています。次の行に進む前に、最初の行を実行する必要があります。それが私たち人間が日常のタスクを操作して完了する方法であるため、それは理にかなっています。

ただし、JSでは、バックグラウンド/フォアグラウンドで実行されている複数の操作があり、ユーザーイベントを待機するたびにフリーズするWebアプリを作成することはできません。

JavaScriptを非同期として説明することは、おそらく誤解を招く可能性があります。JavaScriptは同期的であり、さまざまなコールバックメカニズムを備えたシングルスレッドであると言った方が正確です。続きを読む。

それにもかかわらず、時々物事は順番に起こらなければなりません、さもなければそれは混乱と予期しない結果を引き起こします。そのため、promiseとコールバックを使用して構造化する場合があります。例として、次の操作に進む前にユーザー資格情報を検証する場合があります。

2.AJAXとは

AJAXはAsynchronousJavaScript and XMLの略で、アプリの実行中にWebサーバーとデータを交換することでWebページを非同期に更新できます。つまり、基本的には、ページ全体をリロードせずにWebページの一部を更新できることを意味します（URLは同じままです）。

AJAXは誤解を招く名前です。AJAXアプリケーションはXMLを使用してデータを転送する場合がありますが、データをプレーンテキストまたはJSONテキストとして転送することも同様に一般的です。

— w3shools.com

ずっとAJAX？

多くの開発者は、すべてをシングルページアプリケーション（SPA）に含めることに本当に興奮する傾向があり、これは多くの非同期の苦痛につながります！しかし幸いなことに、Angular、VueJS、Reactなどのライブラリがあり、このプロセスを非常に簡単で実用的にしています。

全体として、ページ全体またはページの一部をリロードする必要があるものの間でバランスを取ることが重要です。

そして、ほとんどの場合、ページのリロードは、ブラウザがどれほど強力になったのかという点でうまく機能します。昔は、ページのリロードには数秒かかりました（サーバーの場所とブラウザーの機能によって異なります）。しかし、今日のブラウザーは非常に高速であるため、AJAXを実行するかページの再読み込みを実行するかを決定することは大きな違いではありません。

私の個人的な経験では、ボタンなしで作成するよりも、単純な検索ボタン付きで検索エンジンを作成する方がはるかに簡単で高速です。そしてほとんどの場合、顧客はそれがSPAであるか追加のページリロードであるかを気にしません。もちろん、誤解しないでください。私はSPAが大好きですが、限られた予算とリソースの不足に対処する場合は、いくつかのトレードオフを考慮する必要があります。おそらく、迅速な解決策がより良いアプローチです。

結局のところ、それは実際にはユースケースに依存しますが、個人的には、SPAは単純なページのリロードよりも多くの開発時間と少しの頭痛の種を必要とすると感じています。

3.なぜAPIをフェッチするのですか？

これにより、サーバーに対して宣言型HTTPリクエストを実行できます。リクエストごとにPromise、コンテンツタイプを定義してデータにアクセスするために解決する必要があるを作成します。

Fetch APIの利点は、JSエコシステムによって完全にサポートされており、MDNMozillaドキュメントの一部でもあることです。最後になりましたが、ほとんどのブラウザー（IEを除く）でそのまま使用できます。長期的には、それがWebAPIを呼び出す標準的な方法になると思います。

注意！RXJSでObservableを使用するなど、他のHTTPアプローチと、サブスクライブ/サブスクライブ解除などの観点からメモリ管理/リークにどのように焦点を当てているかをよく知っています。そして多分それはHTTPリクエストを行うための新しい標準的な方法になるでしょう、誰が知っていますか？

とにかく、この記事ではFetch APIにのみ焦点を当てていますが、将来的にはObservableとRXJSに関する記事を書く可能性があります。

4. FetchAPIの簡単な紹介

このfetch()メソッドはPromise、Responseからを解決しRequestてステータス（成功または失敗）を表示するを返します。promise {}コンソールのログ画面にこのメッセージが表示された場合でも、慌てる必要はありません。基本的にはPromise機能しますが、解決されるのを待っています。したがって、それを解決するには.then()、コンテンツにアクセスするためのハンドラー（コールバック）が必要です。

つまり、最初にパスを定義し（Fetch）、次にサーバーからデータを要求し（Request）、次にコンテンツタイプを定義し（Body）、最後にデータにアクセスします（Response）。

この概念を理解するのに苦労しても、心配しないでください。以下に示す例を通じて、より良い概要を得ることができます。

The path we'll be using for our examples //jsonplaceholder.typicode.com/users // returns JSON

5.フェッチAPI-HTTPの例

データにアクセスする場合は、2つの.then()ハンドラー（コールバック）が必要です。ただし、リソースを操作する場合は、.then()ハンドラーが1つだけ必要です。ただし、2番目のものを使用して、値が送信されたことを確認できます。

基本的なフェッチAPIテンプレート：

注意！上記の例は、説明のみを目的としています。コードを実行すると機能しません。

APIの例を取得する

  1. ユーザーを表示する
  2. ユーザーのリストを表示する
  3. 新しいユーザーの作成
  4. ユーザーの削除
  5. ユーザーの更新
注意！リソースは実際にはサーバー上に作成されませんが、実際のサーバーを模倣するために偽の結果を返します。

1.ユーザーを表示する

前述のように、単一のユーザーを表示するプロセスは、2つの.then()ハンドラー（コールバック）で構成されます。最初のハンドラーはオブジェクトを定義し、2番目のハンドラーはデータにアクセスします。

クエリ文字列/users/2を読み取るだけで、APIの機能を理解/予測できることに注意してください。高品質のRESTAPIを作成する方法の詳細については、MaheshHaldarが作成したガイドラインのヒントをご覧ください。

例

2.ユーザーのリストを表示する

この例は、クエリ文字列が/usersであり、ではないことを除いて、前の例とほとんど同じです/users/2。

例

3.新しいユーザーの作成

これは前の例とは少し異なって見えます。あなたはHTTPプロトコルに精通していない場合、それは単にのような甘い方法のカップルを提供してくれPOST、GET、DELETE、UPDATE、PATCHとPUT。これらのメソッドは、実行されるアクションのタイプを単に説明する動詞であり、主にサーバー上のリソース/データを操作するために使用されます。

とにかく、Fetch APIで新しいユーザーを作成するには、HTTP動詞を使用する必要がありますPOST。しかし、最初に、どこかでそれを定義する必要があります。幸い、Initメソッドタイプ、本文、資格情報、ヘッダーなどのカスタム設定を定義するために、URLとともに渡すことができるオプションの引数があります。

注：fetch()メソッドのパラメーターは、Request()コンストラクターのパラメーターと同じです。

例

4.ユーザーの削除

ユーザーを削除するには、最初にでユーザーをターゲットにする必要があり/users/1、次にメソッドタイプをで定義しますDELETE。

例

5.ユーザーの更新

HTTP動詞PUTは、ターゲットリソースを操作するために使用されますPATCH。部分的な変更を行う場合は、を使用する必要があります。これらのHTTP動詞の機能の詳細については、こちらをご覧ください。

例

結論

これで、JavaScriptのFetch APIを使用してサーバーからリソースを取得または操作する方法と、Promiseを処理する方法の基本を理解できました。この記事は、CRUD操作のAPIリクエストを構造化する方法のガイドとして使用できます。

個人的には、Fetch APIは宣言型であり、技術的なコーディングの経験がなくても、何が起こっているのかを簡単に理解できると思います。

すべての例は、.thenコールバックを使用してリクエストをチェーンするpromised-baseリクエストに示されています。これは多くの開発者が精通している標準的なアプローチですが、使用したい場合はasync/awaitこの記事をチェックしてください。概念は同じasync/awaitですが、読み取りと書き込みが簡単です。

これは私がウェブエコシステムについて書いたいくつかの記事と、個人的なプログラミングのヒントとコツです。

  • AngularとReactの比較
  • 混沌とした心は混沌としたコードにつながる
  • 常に新しいことを学びたい開発者
  • ES6モジュールの実用ガイド
  • これらのコアWebコンセプトを学ぶ
  • これらの重要なJavaScriptメソッドでスキルを高めましょう
  • カスタムbashコマンドを作成してプログラムを高速化

私が毎週発行しているMediumで私を見つけることができます。または、Twitterで私をフォローして、関連するWeb開発のヒントやコツを個人的なストーリーとともに投稿することもできます。

PSこの記事を楽しんで、もっとこのようなものが欲しいなら、❤をたたいて、それを必要とするかもしれない友達と共有してください、それは良いカルマです。