JavaScriptにおいて、XMLHttpRequest（XHR）に代わるAPIとして、Fetch APIというものが提供されるようになりました。XHRと同等の機能を提供しますが、Fetch APIはよりシンプルで強力です。使い方を学んでみましょう。
Fetch API
基本的な使い方
Fetch APIはPromiseベースの簡単なAPIです。リクエストするにはfetch(url)を呼び出すだけです。
|
1 |
fetch('file.txt') |
fetch()メソッドはPromiseを返します。PromiseはResponseオブジェクトとして解決されます。返ってきたPromiseを実際に処理してみましょう。
|
1 2 3 4 |
fetch('file.txt') .then((response) => response.text()) .then((text) => console.log(text)) .catch((error) => console.log(error)); |
Responseオブジェクトはいくつかのメソッドを持ちます。text()メソッドはレスポンスの内容を、テキストとして解決するPromiseとして返します。Responseオブジェクトは以下のようなメソッドを持っています。
- arrayBuffer()
- blob()
- json()
- text()
- formData()
各メソッドは目的に合わせて使用してください。
Fetch APIの基本的な使い方はこれだけです。たったこれだけでリクエストを送信することができるのです。
fetchが成功したかを調べる
Responseオブジェクトはokプロパティを持ちます。okプロパティを確認することで、ステータスコードが200から299の間にあるか、つまり正常にアクセスできたかどうかを調べることができます。
|
1 2 3 4 5 6 7 8 9 10 |
fetch('file.txt') .then((response) => { if(response.ok) { // ステータスがokならば return response.text(); // レスポンスをテキストとして変換する } else { throw new Error(); } }) .then((text) => console.log(text)) .catch((error) => console.log(error)); |
ここで注意したいのは、仮に404であってもfetchメソッドは例外をスローしないということです。fetchが例外をスローするのは、ネットワークエラーなどに限ります。fetchが成功したかどうかを調べるには、okプロパティを使用してください。
設定を指定する
fetchメソッドは引数を2つ取ります。2つ目の引数はオプションです。2つ目の引数に設定を指定することで、様々なリクエストができます。以下は一例です。
|
1 2 3 4 5 6 7 8 |
fetch('file.txt', { method: 'GET', mode: 'same-origin', credentials: 'include' }) .then((response) => response.text()) .then((text) => console.log(text)) .catch((error) => console.log(error)); |
methodは文字どおりメソッドを指定します。GETやPOSTなど、必要に合わせて設定しましょう。
modeはリクエストのモードです。no-cors、cors、same-originが指定できます。CORS通信によるクロスドメイン通信をするときは、ここでcorsを指定します。
credentialsはクレデンシャルの扱いを指定します。デフォルトはomitです。クッキー等はデフォルトでは含まれません。リクエストにクッキー等のクレデンシャルを含ませたい場合は、same-originやincludeを指定します。
その他にも様々な設定が存在します。詳しくはMDN（https://developer.mozilla.org/ja/docs/Web/API/GlobalFetch/fetch）をご覧ください。
ヘッダやボディを指定する
リクエストのヘッダやボディを指定することもできます。
|
1 2 3 4 5 6 7 8 9 10 |
const myHeaders = new Headers(); myHeaders.append('Content-Type', 'text/plain'); const myBody = 'my body'; fetch('api', { method: 'POST', header: myHeaders, body: myBody }); |
ただし、メソッドがGET/HEADの場合、ボディは指定できません。
Headersオブジェクトは単純なMapです。値を追加したり、取得することができます。
ボディは以下のいずれかのオブジェクトです。
- ArrayBuffer
- ArrayBufferView
- Blob
- File
- 文字列
- URLSearchParams
- FormData