Help us understand the problem. What is going on with this article?

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

hashrock
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした