フェッチAPIの紹介

キーポイント

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

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

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

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

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

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

fetch

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ペイロードを抽出する方法を見てみましょう。

メソッドを公開する応答オブジェクトを返します。最初の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を使用すると、要求オブジェクトを明示的に構成できます。 たとえば、要求を変更する方法（たとえば、リクエストメソッドを構成する）を変更する必要がある場合、リクエストオブジェクトを

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"
}

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

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

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

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

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

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

Fetch API（FAQ）

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

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