フェッチAPIの紹介

キーポイント

• 約束ベースの構造により、フェッチAPIはネットワークリクエストのXMLHTTPREQUESTを徐々に置き換えています。これにより、構文がより簡潔になり、コールバックHELLが回避されます。
• fetch()メソッドは、windowオブジェクト、つまりリソー​​スのURLを取得する必要があり、リクエストの応答を取得するために使用できる約束を返します。
• Fetch APIは、リクエストメソッドとヘッダーを変更するなど、リクエストオブジェクトの明示的な構成を可能にします。これは、要求オブジェクトをfetch()関数に渡すことで実行できます。
Fetch APIを使用したエラー処理には、応答ステータスコードが200の範囲内にある場合、応答オブジェクトの
• プロパティをチェックすることが含まれます。ネットワークの障害の場合、okブロックを使用できます。 true try...catch この記事では、新しいFetch APIの外観、解決する問題、および関数を使用してWebページ内でリモートデータを取得する最も実用的な方法を紹介します。

長年、XMLHTTPREQUESTはWeb開発者にとって信頼できるアシスタントでした。 XMLHTTPREQUESTは、直接使用するかどうかにかかわらず、GmailからFacebookまで、Ajaxと新しいインタラクティブエクスペリエンスをサポートしています。

ただし、xmlhttprequestは徐々にフェッチAPIに置き換えられています。どちらもネットワークリクエストを行うために使用できますが、フェッチAPIは約束に基づいているため、構文がより簡潔になり、コールバックHELLを回避できます。 fetch()

Fetch API Fetch APIは、リクエストを実行するために使用できる

オブジェクトで定義された

メソッドを提供します。この方法は、要求の応答を取得するために使用できる約束を返します。

メソッドには、必要なパラメーター、つまり、取得するリソースのURLのみが1つしかありません。非常に基本的な例を以下に示します。これにより、REDDITでR/JavaScriptの最初の5つの投稿が得られます：

windowブラウザのコンソールで応答を確認すると、複数のプロパティを持つ応答オブジェクトが表示されます。 fetch()

リクエストは成功したようですが、最初の5つの投稿はどこにありますか？調べてみましょう。

fetch

json

fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => console.log(res));

をロードします

ユーザーインターフェイスをブロックして、リクエストが完了するのを待つことはできません。これが、

{
  body: ReadableStream
  bodyUsed: false
  headers: Headers {}
  ok: true
  redirected: false
  status: 200
  statusText: ""
  type: "cors"
  url: "https://www.reddit.com/top/.json?count=5"
}

が将来の結果を表すオブジェクトである約束を返す理由です。上記の例では、サーバーの応答を待ってコンソールにログに記録するために

メソッドを使用します。

次に、リクエストが完了した後、その応答からJSONペイロードを抽出する方法を見てみましょう。

に電話してリクエストを開始します。約束が終了すると、A

メソッドを公開する応答オブジェクトを返します。最初のfetch()では、このthenメソッドを呼び出して、JSONとして応答本体を返すことができます。

ただし、

jsonメソッドは約束も返します。つまり、コンソールにJSON応答をログに記録する前に、別のthen()をリンクする必要があります。

なぜjson()約束を返すのですか？ HTTPを使用すると、ブロックごとにコンテンツブロックをクライアントにストリーミングできるため、ブラウザがサーバーから応答を受信した場合でも、コンテンツ本体がまだ到着していない可能性があります。

async ...待ち望んでいます

.then()構文は良好ですが、2018年に約束に対処する簡略化された方法は、ES2017によって導入された新しい構文を使用することです。 async...awaitを使用すると、関数をasync...awaitとしてマークし、asyncキーワードを使用して、通常のオブジェクトのように結果に完了してアクセスするという約束を待つことができます。非同期関数は、すべての最新のブラウザ（IEまたはOpera Miniを除く）およびNode.js 7.6でサポートされています。 await

以下は上記の例（わずかに拡張された）です：

async...await

大きな変更はありません。非同期関数（サブディレクトリの名前を渡した）を作成したという事実に加えて、

fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => console.log(res));

を呼び出してから

を使用して、応答からJSONを取得する結果を待っています。 fetch() awaitこれは基本的なワークフローですが、リモートサービスに関連するものは必ずしもスムーズに進むとは限りません。

エラーの処理

存在しない、または承認が必要なサーバーを要求するとします。 404応答などのアプリケーションレベルのエラーを使用すると、通常のプロセス内で処理する必要があります。前述のように、

は

属性を持つ応答オブジェクトを返します。 fetch()の場合、応答ステータスコードは200の範囲です。 fetch() okサーバー応答コードの意味はAPIによって異なり、response.okのチェックでは通常十分ではありません。たとえば、一部のAPIは、APIキーが無効である場合でも200の応答を返します。必ずAPIドキュメントを読んでください！ true ネットワークの障害を処理するには、

ブロックを使用してください：

{
  body: ReadableStream
  bodyUsed: false
  headers: Headers {}
  ok: true
  redirected: false
  status: 200
  statusText: ""
  type: "cors"
  url: "https://www.reddit.com/top/.json?count=5"
}

response.ok

ブロックのコードは、ネットワークエラーが発生したときにのみ実行されます。

try...catchあなたは、リクエストを行い、応答を読むことの基本を学びました。次に、リクエストをさらにカスタマイズしましょう。

fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => res.json())
  .then(json => console.log(json));

リクエストメソッドとヘッダーを変更catch

上記の例を見ると、なぜ既存のxmlhttprequestラッパーを使用できないのか疑問に思うかもしれません。その理由は、Fetch APIが

メソッド以上のものを提供しているためです。

同じxmlhttprequestインスタンスを使用して要求を実行および取得する必要がありますが、Fetch APIを使用すると、要求オブジェクトを明示的に構成できます。 たとえば、要求を変更する方法（たとえば、リクエストメソッドを構成する）を変更する必要がある場合、リクエストオブジェクトを

関数に渡すことができます。リクエストコンストラクターの最初のパラメーターはリクエストURLであり、2番目のパラメーターはリクエストを構成するためのオプションオブジェクトです。

fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => console.log(res));

ここで、リクエスト方法を指定し、応答をキャッシュしないように依頼します。

リクエストヘッダーは、ヘッダーオブジェクトをリクエストヘッダーフィールドに割り当てることで変更できます。 「Accept」ヘッダーのみを使用してJSONコンテンツをリクエストする方法は次のとおりです。

{
  body: ReadableStream
  bodyUsed: false
  headers: Headers {}
  ok: true
  redirected: false
  status: 200
  statusText: ""
  type: "cors"
  url: "https://www.reddit.com/top/.json?count=5"
}

目的を調整するために、古いリクエストから新しいリクエストを作成できます。たとえば、Get Requestから同じリソースへのPOSTリクエストを作成できます。例は次のとおりです。

fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => res.json())
  .then(json => console.log(json));

応答ヘッダーにもアクセスできますが、読み取り専用の値であることを忘れないでください。

async function fetchTopFive(sub) {
  const URL = `https://www.reddit.com/r/${sub}/top/.json?limit=5`;
  const fetchResult = fetch(URL);
  const response = await fetchResult;
  const jsonData = await response.json();
  console.log(jsonData);
}

fetchTopFive('javascript');

リクエストと応答は、HTTP仕様に密接に従います。もっと学習することに興味がある場合は、MDNのFetchAPIページのすべての関連情報を読むことができます。

すべてのコンテンツを統合 この記事を終了するために、特定のサブディレクトリの最初の5つの投稿を取得し、リストに詳細を表示する方法を示す実行可能な例を以下に示します。

（Codepenの例をここに挿入する必要がありますが、外部Webサイトにアクセスできないため、提供できません）

次のステップ

この記事では、新しいFetch APIの外観とそれが解決する問題について学びました。リモートデータを取得するためにメソッドを使用する方法、エラーの処理方法、リクエストオブジェクトを作成してリクエストメソッドとヘッダーを制御する方法を実証しました。

以下のチャートに示すように、fetch()のサポートは良いです。古いブラウザをサポートする必要がある場合は、PolyFillを使用できます。

fetch()（Fetchを使用できますか？チャートはここに挿入する必要がありますが、外部Webサイトにアクセスできないため、提供できません）

したがって、jQueryなどのライブラリを使用して次回AJAX要求を行うときは、ネイティブブラウザメソッドを使用できるかどうかを検討してください。

Fetch API（FAQ）

に関するよくある質問 （FAQパーツをここに含める必要がありますが、スペースの制限のために省略します。前の出力に基づいてFAQパーツを自分で補うことができます。

以上がフェッチAPIの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。