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