Fetch API

Promisesをビルディングブロックとして使用する非同期ネットワークリクエストへの最新のアプローチであるFetchAPIについてすべて学びます

FetchAPIの概要

IE5が1998年にリリースされて以来、ブラウザで非同期ネットワーク呼び出しを行うオプションがありました。XMLHttpRequest（XHR）。

この数年後、GMailやその他の豊富なアプリはそれを多用し、このアプローチを非常に人気のあるものにして、名前を付ける必要がありました。AJAX。

XMLHttpRequestを直接操作することは常に苦痛であり、ほとんどの場合、ライブラリによって抽象化されていました。特に、jQueryには独自のヘルパー関数が組み込まれています。

jQuery.ajax()
jQuery.get()
jQuery.post()

等々。

特に、すべてが古いブラウザでも機能するようにすることに関して、これをよりアクセスしやすくすることに大きな影響を与えました。

ザ・フェッチAPI、非同期ネットワーク要求への最新のアプローチとして標準化されており、約束ビルディングブロックとして。

Fetchは、IEを除く主要なブラウザー全体で優れたサポートを提供します。

The browser support for the Fetch API

ポリフィルhttps://github.com/github/fetchによってリリースGitHub使用することができますfetchどのブラウザでも。

フェッチの使用

GETリクエストにFetchを使い始めるのは、とても簡単です。

fetch('/file.json')

そして、あなたはすでにそれを使用しています：フェッチは取得するためにHTTPリクエストを作成しようとしていますfile.json同じドメイン上のリソース。

ご覧のとおり、fetch機能はグローバルで利用可能ですwindow範囲。

これをもう少し便利にしましょう。実際にファイルの内容を見てみましょう。

fetch('./file.json')
  .then(response => response.json())
  .then(data => console.log(data))

呼び出しfetch()を返します約束する。次に、ハンドラーを渡して、promiseが解決するのを待つことができます。then()約束の方法。

そのハンドラーは、の戻り値を受け取りますfetch約束、応答オブジェクト。

このオブジェクトについては、次のセクションで詳しく説明します。

キャッチエラー

以来fetch()約束を返します、私たちは使用することができますcatchリクエストの実行中に発生したエラーをインターセプトするpromiseのメソッド、およびthenコールバック：

fetch('./file.json')
.then(response => {
  //...
})
.catch(err => console.error(err))

エラーをキャッチする別の方法は、最初にエラーを管理することですthen：

fetch('./file.json')
.then(response => {
  if (!response.ok) { throw Error(response.statusText) }
  return response
})
.then(response => {
  //...
})

応答オブジェクト

によって返される応答オブジェクトfetch()呼び出しには、ネットワーク要求の要求と応答に関するすべての情報が含まれています。

メタデータ

ヘッダー

にアクセスするheadersのプロパティresponseオブジェクトを使用すると、リクエストによって返されたHTTPヘッダーを調べることができます。

fetch('./file.json').then(response => {
  console.log(response.headers.get('Content-Type'))
  console.log(response.headers.get('Date'))
})

Request headers for fetch

状態

このプロパティは、HTTP応答ステータスを表す整数です。

101、204、205、または304はヌルボディステータスです
200から299まではOKステータス（成功）です

301、302、303、307、または308はリダイレクトです

fetch('./file.json').then(response => console.log(response.status))

statusText

statusText応答のステータスメッセージを表すプロパティです。リクエストが成功した場合、ステータスはOK。

fetch('./file.json').then(response => console.log(response.statusText))

url

urlフェッチしたプロパティの完全なURLを表します。

fetch('./file.json').then(response => console.log(response.url))

ボディコンテンツ

応答には本文があり、いくつかの方法を使用してアクセスできます。

text()本体を文字列として返します
json()本体をとして返しますJSON-解析されたオブジェクト
blob()本体をとして返しますブロブオブジェクト
formData()本体をFormDataオブジェクトとして返します
arrayBuffer()として体を返しますArrayBufferオブジェクト

これらのメソッドはすべてpromiseを返します。例：

fetch('./file.json')
  .then(response => response.text())
  .then(body => console.log(body))

fetch('./file.json')
  .then(response => response.json())
  .then(body => console.log(body))

Get JSON

同じことを使用して書くことができますES2017 非同期関数：

;(async () => {
  const response = await fetch('./file.json')
  const data = await response.json()
  console.log(data)
})()

リクエストオブジェクト

Requestオブジェクトはリソース要求を表し、通常はを使用して作成されます。new Request()API。

例：

const req = new Request('/api/todos')

Requestオブジェクトは、リソース要求の詳細を検査するための読み取り専用プロパティをいくつか提供します。

method：リクエストのメソッド（GET、POSTなど）
url：リクエストのURL。
headers：リクエストの関連するHeadersオブジェクト
referrer：リクエストのリファラー
cache：リクエストのキャッシュモード（例：デフォルト、リロード、キャッシュなし）。

そして、以下を含むいくつかのメソッドを公開しますjson()、text()そしてformData()リクエストの本文を処理します。

完全なAPIは次の場所にあります。https://developer.mozilla.org/docs/Web/API/Request

リクエストヘッダー

HTTPリクエストヘッダーを設定できることは不可欠であり、fetchヘッダーオブジェクトを使用してこれを行う機能を提供します。

const headers = new Headers()
headers.append('Content-Type', 'application/json')

または：

const headers = new Headers({
  'Content-Type': 'application/json'
})

ヘッダーをリクエストに添付するには、Requestオブジェクトを使用して、に渡します。fetch()URLを渡す代わりに。

の代わりに：

fetch('./file.json')

私たちはします

const request = new Request('./file.json', {
  headers: new Headers({
    'Content-Type': 'application/json'
  })
})
fetch(request)

Headersオブジェクトは設定値に限定されませんが、クエリを実行することもできます。

headers.has('Content-Type')
headers.get('Content-Type')

以前に設定されたヘッダーを削除できます。

headers.delete('X-My-Custom-Header')

POSTリクエスト

Fetchでは、リクエストで他のHTTPメソッド（POST、PUT、DELETE、OPTIONS）を使用することもできます。

リクエストのmethodプロパティでメソッドを指定し、ヘッダーとリクエスト本文で追加のパラメーターを渡します。

POSTリクエストの例：

const options = {
  method: 'post',
  headers: {
    'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
  },
  body: 'name=Flavio&test=1'
}
fetch(url, options).catch(err => {
console.error(‘Request failed’, err)
})

フェッチリクエストをキャンセルする方法

その後数年間fetchが導入されたため、一度開いたリクエストを中止する方法はありませんでした。

の導入のおかげで今私たちはできますAbortControllerそしてAbortSignal、通知する汎用APIアボートイベント

このAPIを統合するには、シグナルをフェッチパラメーターとして渡します。

const controller = new AbortController()
const signal = controller.signal
fetch(’./file.json’, { signal })

フェッチ要求が開始されてから5秒後にアボートイベントを発生させるタイムアウトを設定して、キャンセルすることができます。

setTimeout(() => controller.abort(), 5 * 1000)

便利なことに、フェッチがすでに戻っている場合は、abort()エラーは発生しません。

アボートシグナルが発生すると、フェッチはプロミスを拒否します。DOMException名前付きAbortError：

fetch('./file.json', { signal })
  .then(response => response.text())
  .then(text => console.log(text))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.error('Fetch aborted')
    } else {
      console.error('Another error', err)
    }
  })

もっとお探しですか？

ネットワークでの作業は大変ですよね？あなたはそれを見つけるかもしれませんAxiosJavaScriptライブラリは、Fetchに基づいて構築されたいくつかの追加機能により、ニーズにより適している場合があります。見てみな！

私の無料ダウンロードJavaScriptビギナーズハンドブック