🦊

Javascript ”Learn Fetch API / Ajax (XHR)”

2023/08/16に公開

JavaScript

Fetchとは？

fetchメソッドは、JavaScriptでサーバーにネットワークリクエストを送信し、応答を受けることができるメソッドです。

XMLHtpRequestと似ていますが、fetchはPromiseに基づいて構成されているため、より簡単に使用できるという違いがあります。

fetchが登場する前はJavascriptでajaxをややこしかったです。
また、Internet Explorer（現在終了されている）とか他のブラウザにうまく行けなかったので、jQueryで使いました。

$.ajax({
    url: "",
    type: "",
    cache: ,
    dataType: "",
    data: "",
    success: function(data){
    },

    error: function (request, status, error){        
    }
  });

例えばjQueryのajax()メソッドを使ってAJAX実装のみを目的として使われました。

fetch基本構造

fetch(url, [options])
.then(res => {
  console.log(res)
})
.catch(error => {
  console.log(error)
})

非同期呼び出しは Promise で実装されていて、then() でResponseオブジェクトを受け取ります。

thenでResponseオブジェクトresを受け取り、catchでエラー要請が発生したときにエラーを受け取ります。

リクエスト情報パラメータ

 fetch(url, {
   method: 'post',
   headers: {
     "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
   },
   body: 'foo=bar&lorem=ipsum'
})
.then(res => {
  console.log(res);
})
.catch(error => console.log(error));

fetchの2番目のパラメータとしてリクエストに対する追加データを入力することができます。

method : HTTP methodと同じ要請方式です。（GET, POST, PUT, DELETEなど）
headers : リクエストヘッダーに関する情報を示します。
body : リクエストを送信するデータを示します。色々な資料型を代入することができます。

POSTリクエストを送信して応答を受け取り

fetch(url, {
  method: 'POST',
  body: JSON.stringify({ name: "sunny" })
})
.then(res => {
  if (res.status === 200) {
    res.text().then(text => console.log(text)
  }
  else {
    console.log(res.statusText)
  }
})
.catch(err => console.log(err))

POSTでbodyの中にデータを入れ、リクエストを送るとResponseオブジェクトresが届きます。
resの中にはResponseに関する情報が存在します。

statusはリクエストが成功か失敗かを判別できるようにする要素だ
Responseに関する内容はres.text()で確認できる
text()の他にもarrayBuffer、blob、json、formDataなどのメソッドを使用して値を見ることもできる
GET、PUT、DELETE要請も同じ方式で送ることができる
GET、DELETE要請はurlパラメータ1つだけ入力して使える

Ajax, axios, fetchの違い

Ajax

Asynchronous JavaScript And XMLで、JavaScriptを使ってクライアントとサーバー間でデータをやり取りする非同期HTTP通信です。
XMLHtpRequest(XHR)オブジェクトを利用して、全体ページではなく必要なデータだけを読み込むことができます。

🐣メリット

Jqueryで簡単に実現可能
Error、Success、Completeの状態で実行の流れを調節可能

🐣デメリット

Jqueryではないと複雑、互換性が保障されないとだめ
Promiseベースではない

🐓XMLHttpRequest(XHR)の場合

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() { // リクエストCALLBACK
 if (xhr.readyState === xhr.DONE) { // リクエストが完了したら
   if (xhr.status === 200 || xhr.status === 201) {
     console.log(xhr.responseText);
   } else {
     console.error(xhr.responseText);
   }
 }
};
xhr.open('GET', 'https://localhost:3000'); // メソッドと住所設定
xhr.send(); // リクエスト送信
// xhr.abort(); // 送信リクエストキャンセル

🐓Jqueryの場合

var serverAddress = 'https://localhost:3000';

// jQueryの .get メソッド
$.ajax({
    url: serverAddress,
    type: 'GET',
    success: function onData (data) {
        console.log(data);
    },
    error: function onError (error) {
        console.error(error);
    }
});

axios

axiosはNode.jsとブラウザのためのPromise APIを活用するHTTP通信ライブラリです。
非同期でHTTP通信ができ、returnをpromiseオブジェクトにしてくれるため、responseデータを扱いやすいです。

🐣メリット

response timeout(fetchにはない機能)処理方法がある
Promiseベースで作られているため、データの取り扱いに便利
ブラウザ互換性が良い

🐣デメリット

ご使用のためモジュール設置が必要(npm install axios)

axios({
  method: 'post',
  url: 'https://localhost:3000/user',
  data: {
    userName: 'sunny',
    userId: 'sunny01'
  }
}).then((response) => console.log(response));

fetch

ES6から入ってきたJavaScript内蔵ライブラリです。
Promiseベースで作られているため、axiosと同様にデータの扱いやすいで、内蔵ライブラリというメリットでかなり便利です。

🐣メリット

JavaScriptの内蔵ライブラリですので、別途インポートする必要がない
Promiseベースで作られているため、データの取り扱いに便利
内蔵ライブラリのため、アップデートによるエラー防止が可能

🐣デメリット

対応していないブラウザが存在(IE11)
ネットワークエラーが発生した場合、response timeoutがないので、待たないとだめ
JSONに変換する必要がある
相対的にaxiosに比べて機能が不足

fetch("https://localhost:3000/user/post", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    id: "asd123",
    description: "hello world",
  }),
}).then((response) => console.log(response));

~~簡単な通信の場合はfetchを使用し、機能がもう少し必要ならaxiosを使用した方が良さそう~~

🌞参考サイト

Fetchとは？

fetch基本構造

リクエスト情報パラメータ

POSTリクエストを送信して応答を受け取り

Ajax, axios, fetchの違い

Ajax

axios

fetch

Discussion