こんにちは、開発部のまつおかです。

今日は非同期処理のライブラリとして使用できる「SuperAgent」というものを紹介しようと思います。

SuperAgentってなに？

非同期処理に特化したJavaScriptライブラリです。

最近は、React.jsやVue.jsなどのフレームワークが使われることが増えてきてますよね。(※ここではReact.jsやVue.jsの説明は割愛します)

そのReactやVueでは基本的に直接DOM操作することは望まれていない、というのがあげられます。となると、普段よく使用するjQueryも非同期処理でしか使わなくなるということになってきます。

(非同期処理のためだけに、比較的サイズの大きいjQueryを読み込む事になるのかぁ・・・)
というような時に使えるのがSuperAgentになります。

前述の通り、「非同期処理に特化したライブラリ」ですのでその他余計な処理は一切ありません。ですのでサイズがjQueryに比べてグッと小さくなり、ほんの少しだけレンダリングの速度も短くなるということになるんでしょうね。

ほんの一例のみになりますが、jQueryでの記述方法と比較しながらSuperAgentでの記述方法を紹介していきます。

GET/POST通信

jQueryでもよく使われるであろうPOST通信の例です。

jQueryでの書き方(他の書き方もあります)

$.ajax({
  type: 'POST',
  url:  'hogeApi.php',
  data: {hoge: fuga}
}).done(function(res) {
  console.info(res);
  console.log('success');
}).fail(function() {
  console.error('error');
}).always(function() {
  console.log('complete');
});

SuperAgentでの書き方

var request = window.superagent;
request
  .post('hogeApi.php')
  .send({hoge: fuga})
  .end(function(err, res){
     if (res.ok) {
       console.info(res.body);
       console.log('success');
     } else {
       console.error('error');
     }
    console.log('complete');
  });

あまり大差ありませんね！
ちなみにGETの場合は、こうなります。

var request = window.superagent;
request
  .get('hogeApi.php')
  .query({hoge: fuga})
  .end(function(err, res){
     if (res.ok) {
       console.info(res.body);
       console.log('success');
     } else {
       console.error('error');
     }
    console.log('complete');
  });

いかがでしょう。

多少記述方法に違いがありますが、感覚的には同じように書けてしまうのでそこまで学習コストも高くなさそうですね。

さらにjQueryより軽量だということで、「DOM操作にjQueryを使用しない」という前提があればこちらのライブラリを使うという選択肢も出てきます。

※ちなみに、SuperAgentはJSONPには対応していないようです。(superagent-jsonpというものがあるそうですが、、、)

以上、開発部まつおかでした！