Skip to main content

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}はクエリオプションを受け入れます。 パラメータリスト:

  1. method-リクエストメソッド(GET、POST、PUT、DELETE、HEAD);
  2. headers-HTTPヘッダー。
  3. body-リクエストbody(メソッドに使用:POST / PUT);
  4. cache-キャッシュモード(デフォルト、リロード、キャッシュなし);
  5. mode-リクエストモード(cors、no-cors、same-origin);
  6. redirect-リダイレクトの処理方法(フォロー、エラー、手動)を指定します。
  7. referrer-リファラーを要求します。
  8. signal-AbortSignal、リクエストの中止。
  9. 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。

  1. status-応答コード;
  2. statusText-応答コードに対応するテキスト📜メッセージ。
  3. ok-応答コードの成功を示すブール値(true:200-299);
  4. headers-応答ヘッダーを持つオブジェクト。キーはヘッダーの名前であり、キーの値はキーに対応するヘッダーの値です。
  5. url-リクエストの送信先のURL。
  6. body-ReadableStream形式の応答データ
  7. bodyUsedは、データが読み取られていることを示すブール値です。
fetch('https://jsonplaceholder.typicode.com/users').then(response => console.log(response))

応答処理​

Download

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

  1. text()-応答を文字列に変換します。
  2. json()-応答をJSON形式に変換します。
  3. blob()-応答をBlobオブジェクトに変換します。
  4. formData()-応答をFormDataのインスタンスに変換します。
  5. 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)

問題?​

Problem

に書き込む Discord または電報 チャット, また、私たちの購読 ニュース

質問:​

Question

fetch()メソッドは何を返しますか?

  1. 機能
  2. オブジェクト
  3. 約束

fetch()へのURLパラメータのみが与えられた場合、どのようなリクエストを取得しますか?

  1. POST
  2. GET
  3. PUT

HTTPヘッダーを指定するパラメーターはどれですか?

  1. リダイレクト
  2. ヘッダー
  3. 資格情報

応答を文字列に変換するには、どのメソッドを使用する必要がありますか?

  1. blob()
  2. json()
  3. text()

Responseクラスオブジェクトのokプロパティはどういう意味ですか?

1.応答コード 2.応答コードの成功 3.リクエストからのデータの読み取り

このレッスンでどれだけ学んだかを理解するために、このトピックについて当校の モバイルアプリケーション でテストを受けてください。

Sumerian school

リンク​

  1. Learn JavaScript
  2. MDN Web Docs
  3. JS Tutorial

Contributors ✨​

Thanks goes to these wonderful people (emoji key):


IIo3iTiv

📖

Dmitriy Vasilev

💵

Resoner2005

🐛 🎨 🖋

Navernoss

🖋 🐛 🎨

Become a Patron!