【Javascript】$.ajax(jQuery)の代わりにはfetchがいいらしい

はじめに

Javascriptで、動的に外部コンテンツをロードする際、ajaxしますよね。
ネットで「Javascript ajax」なんて調べると、大体jQueryでajaxする方法が出てきます。

が、最近はjQuery無しでクールにajaxするfetchというAPIがあるようなので、その話題です。

(もちろん、jQuery無しでもXMLHttpRequestをJavascriptで書けばいいんですけど、長くなりがちなので私は好きではありません)

jQueryを使用したajax

このajaxですが、広く普及している方法としては、jQueryを用いて下記のようにajaxコールすることが多いと思います。

        $.ajax({
            type: "GET",
            url: href,
            data: jQuery.param({
                type: type,
                msg:  msg,
                msg2: msg2,
                msg3: msg3
            }),
            dataType: "json",
            success: function(data){
                console.log("Send error info Success!!");
                console.log(data);
            },
            error: function(data){
                console.log("Send error info Failure... Because:");
                console.log(data);
            }
        });

よく見るパターンですよね。
jQuery.ajaxメソッドで、各種パラメータを引数に渡して…

もちろん、jQueryをプロジェクトで採用している場合はこれで良いと思います。
しかし、jQueryを使用していないプロジェクトの場合は、どうしようか…と悩むことしばしば。

そんなあなたにfetch

jQueryは使ってないし、XMLHttpRequest使うのもなぁ…

とそんなあなたに、fetchです。

fetchの基本的な使い方

下記の様に使用します。

fetch("fetchjson.php", {...})
  .then(function(res){ ... }), // ajax成功時
  .then(function(err){ ... })  // ajax失敗時

第1引数に、GET先のURLをセットします。
第2引数は省略可能で、詳細なパラメータを指定できます。
fetchは、thenable(promiseオブジェクト)なので、メソッドチェーンしてGETが成功した場合の処理を書いていけます。

まあ簡単!

取得データの扱い方

「fetchが簡単そう、というのは分かったけど、JSONとか画像とか、どうやって捌けば良いのかしら…」

はい。それ用のメソッドを使って変換します。

JSONとして値を取得する

fetch後のthenした時に受け取るオブジェクトが、jsonに変換するためのメソッドを持っているので、それを使用します。

fetch("fetchjson.php")
  .then(res=> res.json())
  .then(obj=> console.log(obj))

jsonメソッドはthenableなので、続けてthenして後は煮るなり焼くなりできます。

バイナリファイル(画像など)として値を取得する

JSONの場合と似たような感じで、今度はblobメソッドを使用します。

fetch("img.png")   
  .then(res=> res.blob())
  .then(obj=> console.log(obj))

テキストとして値を取得する

textメソッドを使用します。

fetch("meibo.txt")
  .then(res=> res.text())
  .then(obj=> console.log(obj))

パラメータをつけてfetchする

jQueryでは、dataというパラメータに値をセットしていましたが、fetchでは下記のようにパラメータを渡します。

GETの場合

URLにパラメータをくっ付けて渡します。

fetch("fetchjson.php?myparam=hogehoge&myparam2=fugafuga")
  .then(res=> res.json())

POSTの場合

fetchの第2引数にmethod, body, headersを与えて、bodyプロパティにパラメータをセットします。

fetch("fetchjson.php", {
  method: "POST",
  headers : new Headers({"Content-type": "application/json"}),
  body: JSON.stringify({myparam: "hogehoge", myparam2: "fugafuga"})
})
  .then(res=> res.json())

実際に試してみた

index.html (メイン側のhtml(javascript含む))

<html>
<head>
<title>fetch test</title>
<script>
var doFetch = function(){
	fetch("img.png")
		.then(res=> res.ok ? res.blob() : null)
		.then(obj=> {
			if(obj){
				document.getElementById("test-img").src = URL.createObjectURL(obj);
			}
		});
}
var doFetchJson = function(){
	fetch("fetchjson.php")
		.then(res=> res.ok ? res.json() : {} )
		.then(obj=>{
			console.log(obj);
			document.getElementById("json-response").innerHTML = obj.msg;
		});
}

</script>																																			
																																							
</head>
<body>
	
<div>
		<button onclick="doFetch()">PUSH</button>
		<img id="test-img" />
	</div>

	
	
<div>
		<button onclick="doFetchJson()">PUSH JSON</button>
		


	</div>

</body>
</html>

 

fetchjson.php(ただJSONを返却するだけのphp)

<?php $if_return = array("return_cd"=> 0, "msg"=> "this is message!!");
header("Content-Type: application/json; charset=utf-8");
echo json_encode($if_return);
?>

ファイル構成は、

  • /
    • index.html
    • img.png
    • fetchjson.php

こんな感じです。

で、index.htmlをローカル環境(apache立ち上げて)で叩いてみました。

それぞれのボタン押下で、画像ファイル取得&表示, JSON取得&表示が特に問題無くできました。

おわりに

その他細かい点は、本家のMDNを見てください。

ちなみに!
fetchのサポート状況は、2017/06/21現在

  • Chrome 42以上
  • Firefox 39以上
  • IE 未サポート
  • Safari 未サポート
  • モバイル系 全未サポート

となっています。
ので…うん。代わりにとか言ってしまいましたが…jQueryの完全代替になるにはもうしばらく時間がかかりそうです。

c

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です