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

Youtubeでもレブル250/グラディウス400/GN125の情報を発信してます! (登録してもらえると超喜びます!!)

はじめに

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

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

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

jQueryを使用したajax

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

[javascript] $.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);
}
});
[/javascript]

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

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

そんなあなたにfetch

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

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

fetchの基本的な使い方

下記の様に使用します。

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

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

まあ簡単!

取得データの扱い方

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

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

JSONとして値を取得する

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

[javascript] fetch("fetchjson.php")
  .then(res=> res.json())
  .then(obj=> console.log(obj))
[/javascript]

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

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

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

[javascript] fetch("img.png")   
  .then(res=> res.blob())
  .then(obj=> console.log(obj))
[/javascript]

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

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

[javascript] fetch("meibo.txt")
  .then(res=> res.text())
  .then(obj=> console.log(obj))
[/javascript]

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

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

GETの場合

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

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

POSTの場合

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

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

実際に試してみた

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

[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>
[/javascript]

 

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

[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);
?>
[/php]

ファイル構成は、

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

こんな感じです。

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

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

おわりに

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

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

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

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

c

Youtubeでもレブル250/グラディウス400/GN125の情報を発信してます! (登録してもらえると超喜びます!!)
最新情報をチェックしよう!