JavaScriptのFetch APIを利用してリクエストを送信する

JavaScriptにおいて、XMLHttpRequest（XHR）に代わるAPIとして、Fetch APIというものが提供されるようになりました。XHRと同等の機能を提供しますが、Fetch APIはよりシンプルで強力です。使い方を学んでみましょう。

Fetch API

基本的な使い方

Fetch APIはPromiseベースの簡単なAPIです。リクエストするにはfetch(url)を呼び出すだけです。

fetch('file.txt')

fetch()メソッドはPromiseを返します。PromiseはResponseオブジェクトとして解決されます。返ってきたPromiseを実際に処理してみましょう。

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の間にあるか、つまり正常にアクセスできたかどうかを調べることができます。

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つ目の引数に設定を指定することで、様々なリクエストができます。以下は一例です。

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）をご覧ください。

ヘッダやボディを指定する

リクエストのヘッダやボディを指定することもできます。

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