LINEで現役エンジニアに直接質問してみよう!登録無料

javascript Fetch APIの使い方・入門!Ajaxで非同期通信の方法解説

JavaScriptでリクエストの送受信を行う時、Fetch APIというのを使うことができます。

Fetch API以前は、「XMLHttpRequest」というAPIを使って送受信を行っていました。そもそも、非同期通信で使える方法がこれしかなかったんです。

XMLHttpRequestとの比較について知りたい場合は、「XMLHttpRequestと比べて何処が使いにくいのか?」を見てください。

注意

一部、プログラムコードが意図通りに動かない部分があります。内容にはご注意ください。

Fetch APIとは?

JavaScriptには従来、非同期通信をする手段として「XMLHttpRequest」しかありませんでした。
しかし、より簡単に多機能になった非同期通信手段として「Fetch API」が様々なブラウザに実装されました。

Fetch APIを実際に使ってた所、プログラムとデータの流れがわかりやすく変える上に、修正の際にもとても楽でした。

特に、POSTでデータを送信する際には、本当はヘッダーの指定が必要なのですが、よく使われる部分はFetch APIがよしなにやってくれます

Fetch APIの基本的な使い方

Fetch APIの基本的な使い方を解説します。

Fetch APIの基本形

const url = 'https: //example.com'
fetch(url)
  .then(function(response) {
  // レスポンスデータをテキストとして処理する
    return response.text();
})
  .then(function(text) {
  // 正常な通信ができた
    console.log(text);
})
  .catch(function (error) {
  // そもそも通信できない!
  // サーバーエラーがおきた!
    console.log('error')
})

Fetch APIはオプションを何も指定しない場合、GETリクエストになります。そして、.then(function(response) ...で返ってきたresponseオブジェクトから、レスポンスの情報が取ることができます。

通常は、response.text()response.json()として、テキストやjsonデータとして処理するのが一般的です。この時、ステータスコードが2xx以外や通信ができなかった場合は、.catch()までスキップします。

ステータスコードが2xxで、データを処理することができた場合(この場合はresponse.text()でテキストとして処理できた場合)は、次の.then(function(text) ...が実行されます。

ステータスコードが2xx以外のときに特別な処理を行いたい!

responseには、response.okという判定値があります。これはboolean値で、これを見ることで通信が2xxだったのか、それ以外だったのかが判定できます。

const url = 'https: //example.com'
fetch(url)
  .then(function(response) {
    if (response.ok) {
      return response.text();
  } else {
      console.log('error')
  }
})
  .then(function(text) {
  // 正常な通信ができた
    console.log(text);
})
  .catch(function (error) {
  // そもそも通信できない!
  // サーバーエラーがおきた!
    console.log('error')
})

XMLHttpRequestと比べて何処が使いにくいのか?

XMLHttpRequestを使って、GETリクエストを使った一番単純な例を下記に示します。

var xhr = new XMLHttpRequest(); // インスタンス生成
xhr.open("GET",
"https://example.com/api");
xhr.onload = function () {
  if (xhr.readyState === xhr.DONE) {
    if (xhr.status === 200) {
      console.log('Response : ', xhr.response);
      console.log('Text : ', xhr.responseText);
    } else {
      console.log('error')
    }
  }
};

xhr.send(null); // 後始末

見ただけで、結構複雑だと思うはずです。この書き方の問題点は、

  • コードが冗長で複雑
  • 通信が正常だったのか、異常だったのかわかりにくい
  • 後始末など、必須の記述を忘れそうになる

といった事があります。

更に、フォーム(FormData)をPOSTしたり、jsonを処理したりなど、色々処理が入ると、本当にカオスなコードになってしまいます。

しかし、Fetch APIなら、下記のように、プログラムの流れを見やすくメンテンナンスしやすい感じで作ることができます。

fetch('https: //example.com/api')
  .then(function(response) {
    console.log('Text : ', response.text());
})
  .catch(function (error) {
    console.log('error')
}); 
MEMO

「XMLHttpRequest」使いにくい問題を解決すべく、下記のような使いやすい様々なライブラリが開発されました。

このような便利なライブラリの要素が、生のjavascriptの機能に取り入れられ、Fetch APIが作られたという経緯があります。

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。