Fetch API

@serverSerrverlesskiy

Fetch API を使用すると、JavaScriptがHTTPリクエストを使用してサーバーと通信できるようになり、XMLHttpRequestクラスの代わりになります。リクエストはfetch（）メソッドによって実行され、を返します Promise.

Exchange

構文

Book

fetch(url, { options })

--url-リクエストを送信するためのURL。 --options-パラメータをリクエストします。

optionsなしでfetch（） メソッドを指定すると、URLアドレスにデータをダウンロードするGETリクエストを受け取ります。

クエリパラメータ

Option

2番目の引数{options}はクエリオプションを受け入れます。パラメータリスト：

method-リクエストメソッド（GET、POST、PUT、DELETE、HEAD）;
headers-HTTPヘッダー。
body-リクエストbody（メソッドに使用：POST / PUT）;
cache-キャッシュモード（デフォルト、リロード、キャッシュなし）;
mode-リクエストモード（cors、no-cors、same-origin）;
redirect-リダイレクトの処理方法（フォロー、エラー、手動）を指定します。
referrer-リファラーを要求します。
signal-AbortSignal、リクエストの中止。
credentials-リクエストと一緒にCookieを送信します-mit、same-origin。

fetch('https://jsonplaceholder.typicode.com/users', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  },
  mode: 'no-cors'
})

応答を得る

Bascketball

fetch（）メソッドは、次のプロパティを持つResponseクラスのオブジェクトを返します Promise。

status-応答コード;
statusText-応答コードに対応するテキストメッセージ。
ok-応答コードの成功を示すブール値（true：200-299）;
headers-応答ヘッダーを持つオブジェクト。キーはヘッダーの名前であり、キーの値はキーに対応するヘッダーの値です。
url-リクエストの送信先のURL。
body-ReadableStream形式の応答データ
bodyUsedは、データが読み取られていることを示すブール値です。

fetch('https://jsonplaceholder.typicode.com/users').then(response => console.log(response))

応答処理

Download

転送されるデータはReadableStream形式です。次の方法を使用して、形式を変更できます。

text（）-応答を文字列に変換します。
json（）-応答をJSON形式に変換します。
blob（）-応答をBlobオブジェクトに変換します。
formData（）-応答をFormDataのインスタンスに変換します。
arrayBuffer（）-応答をArrayBufferオブジェクトに変換します。

応答をJSON形式に変換する例。

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => console.log(data))

エラー処理

Error

プロパティ "status" と "ok" を使用して、 fetch（）がエラーで終了したかどうかを確認できます。

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => {
    if (!response.ok) {
      console.log('何か問題が発生しました...ステータス： ' + response.status)
    } else {
      return response.json()
    }
  })
  .then(data => console.log(data))

助けを借りて .catch()

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error))

リクエスト例

Math

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => console.log(data[0].name + ' and ' + data[2].name))
  .catch(error => console.log(error))

同じように、 async / await構文を使用します。これについては、次の記事で詳しく説明します。

let response = await fetch('https://jsonplaceholder.typicode.com/users')
let data = await response.json()
console.log(data[0].name + ' and ' + data[2].name)