キーポイント
fetch()
メソッドは、window
オブジェクト、つまりリソースのURLを取得する必要があり、リクエストの応答を取得するために使用できる約束を返します。 fetch()
関数に渡すことで実行できます。 ok
ブロックを使用できます。 true
try...catch
この記事では、新しいFetch APIの外観、解決する問題、および
ただし、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ペイロードを抽出する方法を見てみましょう。
に電話してリクエストを開始します。約束が終了すると、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を使用すると、要求オブジェクトを明示的に構成できます。
たとえば、
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つの投稿を取得し、リストに詳細を表示する方法を示す実行可能な例を以下に示します。
(Codepenの例をここに挿入する必要がありますが、外部Webサイトにアクセスできないため、提供できません)次のステップ
この記事では、新しいFetch APIの外観とそれが解決する問題について学びました。リモートデータを取得するためにメソッドを使用する方法、エラーの処理方法、リクエストオブジェクトを作成してリクエストメソッドとヘッダーを制御する方法を実証しました。
以下のチャートに示すように、fetch()
のサポートは良いです。古いブラウザをサポートする必要がある場合は、PolyFillを使用できます。
fetch()
(Fetchを使用できますか?チャートはここに挿入する必要がありますが、外部Webサイトにアクセスできないため、提供できません)
したがって、jQueryなどのライブラリを使用して次回AJAX要求を行うときは、ネイティブブラウザメソッドを使用できるかどうかを検討してください。
Fetch API(FAQ)
に関するよくある質問 (FAQパーツをここに含める必要がありますが、スペースの制限のために省略します。前の出力に基づいてFAQパーツを自分で補うことができます。
以上がフェッチAPIの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。