Edited at

jQuery.ajaxの代わりにSuperAgentを使う

More than 1 year has passed since last update.

superagent.png


脱jQuery

AngularJSやVue.jsでは、DOMの直接操作は推奨されません。

そうなると、jQueryはAJAXでしか使わなくなります。

であれば、AJAX専用のライブラリにまかせてしまって、jQuery依存を外したくなってきます。

というわけで、AJAXだけをやってくれるライブラリとして、SuperAgentを導入してみましょう。


SuperAgent

HTTPリクエストに特化したライブラリです。

Node.jsとブラウザ両方で使うことができます。

https://github.com/visionmedia/superagent

作者はExpress, Stylusの開発などで有名なTJです。


superagentの良さ

superagent

かわいい。


ブラウザでの導入方法

まず、下記URLにアクセスし、ファイル名superagent.jsとして名前をつけて保存してください。

https://wzrd.in/standalone/superagent@latest

scriptタグでsuperagent.jsをHTMLにロードした後、以下のコードを挿入します。

var request = window.superagent;


Node.jsでの導入方法

普通にrequireすればよいです。

var request = require('superagent');


GET

一番拡張性の高い、メソッドチェーンで書きます。


素直なGET

request

.get(url)
.end(function(err, res){
console.log(res.text);//レスポンス
//レスポンスがJSONの場合
console.log(res.body);//ここにparse済みのオブジェクトが入る
});

クエリパラメータ付きGET

request

.get(url)
.query({user: "Taro"})
.end(function(err, res){
console.log(res.body);
});

もし、チェーンするスタイルがお好みでなければ、下記のようにも書けます。

request

.get(url, function(err, res){
if (err) throw err;
console.log(res.text);
})


POST


単純なPOST

request

.post(url)
.send({name: name, text: text})
.end(function(err, res){
console.log(res.body);
});


x-www-form-urlencoded

request

.post(url)
.type('form')
.send({name: name, text: text})
.end(function(err, res){
console.log(res.body);
});


その他

PUT, DELETEももちろん出来ます。


PUT

request

.put(url)
.end(function(err, res){
// ...
});


DELETE

request

.del(url)
.end(function(err, res){
// ...
});


サンプル

以上のコードの動作チェックは、下記リポジトリで行っております。不具合等ありましたら、プルリクエストをお願い致します。

https://github.com/hashrock-sandbox/superagent-example


参考資料

http://smalljs.org/ajax/superagent/


もう一つの選択肢「Fetch API」

SuperAgentは便利ですが、今後のWeb標準化(Extensible Web)の展開を考えると、

whatwgで議論されている「Fetch API」を使うといいかもしれません。

Fetch APIについては下記サイトが詳しいです。

Fetch API 解説、または Web において "Fetch する" とは何か? - Block Rockin’ Codes

Fetch APIは策定中ですが、polyfillが提供されているため、

現在でもSuperAgentと同様に利用することが出来ます。

https://github.com/github/fetch

例えば、GETであれば下記のように利用します。

require("whatwg-fetch");

fetch(url)
.then(function(res){
return res.text();
}).then(function(text){
console.log(text);
});


追記:Fetch API利用時の注意点

Fetch APIを使う時には「cookieを自動で送信しない」という点に注意が必要です。詳しくは下記ドキュメントを参照してください。

https://github.com/github/fetch#sending-cookies


追記:さらにその他の選択肢

Promiseベースのaxiosというライブラリが話題になることが増えてきました。詳しくは下記記事を参照してください。

superagentとaxiosの使い分け - Qiita