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

Jad Joubranによって作成された画像

このガイドでは、Fetch API(ES6 +)を使用してREST APIへのHTTPリクエストを実行する方法と、実際に遭遇する可能性のある例を紹介します。

HTTPの例をすぐに見たいですか?セクション5に進みます。最初の部分では、HTTP要求を処理する場合のJavaScriptの非同期部分について説明します。

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

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

リソースをさらに操作するために、.map()、. filter()、および.reduce()などのJSメソッド(推奨)をよく使用します。

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

対処方法は次のとおりです

  1. JSの非同期HTTPリクエストの処理
  2. AJAXとは何ですか?
  3. Fetch APIを使用する理由
  4. Fetch APIの簡単な紹介
  5. Fetch API-CRUDの例←良いもの!

1. JSの非同期HTTPリクエストに対処する

JavaScript(JS)がどのように機能するかを理解する上で最も難しい部分の1つは、非同期要求を処理する方法を理解することです。

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

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

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

それにもかかわらず、時には物事が順番に発生する必要があります。そうしないと、混乱と予期しない結果が発生します。そのため、プロミスとコールバックを使用して構造化できます。たとえば、次の操作に進む前にユーザーの資格情報を検証することができます。

2. AJAXとは

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

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

ずっとAJAXですか?

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

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

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

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

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

3. Fetch APIを使用する理由

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

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

注意! RXJSでObservableを使用するなど、他のHTTPアプローチと、サブスクライブ/アンサブスクライブなどの観点からメモリ管理/リークに焦点を当てる方法をよく知っています。そして、おそらくそれがHTTPリクエストを行う新しい標準的な方法になるでしょう。
とにかく、この記事ではFetch APIのみに焦点を当てていますが、将来ObservableとRXJSに関する記事を書くかもしれません。

4. Fetch APIの簡単な紹介

fetch()メソッドは、リクエストからのレスポンスを解決してステータス(成功または失敗)を表示するPromiseを返します。コンソールログ画面でこのメッセージpromise {}を受け取ったとしても、パニックにならないでください。これは基本的にPromiseは機能しているが、解決されるのを待っていることを意味します。したがって、それを解決するには、コンテンツにアクセスするための.then()ハンドラー(コールバック)が必要です。

つまり、最初にパスを定義し(フェッチ)、次にサーバーからデータを要求し(要求)、3番目にコンテンツタイプを定義し(ボディ)、最後にデータにアクセスします(応答)。

この概念を理解するのに苦労しても心配しないでください。以下に示す例により、概要がわかりやすくなります。

例に使用するパス
https://jsonplaceholder.typicode.com/users // JSONを返します

5. Fetch API-HTTPの例

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

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

注意!上記の例は、単に説明のためのものです。コードを実行すると機能しません。

フェッチAPIの例

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

1.ユーザーを表示する

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

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

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

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

3.新しいユーザーを作成する

これは、前の例と少し異なります。 HTTPプロトコルに慣れていない場合は、POST、GET、DELETE、UPDATE、PATCH、PUTなどの簡単なメソッドを提供するだけです。これらのメソッドは、実行されるアクションのタイプを単に記述する動詞であり、主にサーバー上のリソース/データを操作するために使用されます。

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

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

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の比較
  • 混oticとした心は混oticとしたコードにつながる
  • 常に新しいことを学びたい開発者
  • ES6モジュールの実用的なガイド
  • これらのコアWebコンセプトを学ぶ
  • これらの重要なJavaScriptメソッドでスキルを向上させます
  • カスタムbashコマンドを作成してプログラムを高速化

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

追伸この記事を楽しんで、もっとこのようなものが必要な場合は、❤拍手して、必要な友人と共有してください。良いカルマです。