superagent
axios

superagentとaxiosの使い分け

More than 1 year has passed since last update.

モバイルファクトリー Advent Calendar一日目担当の@nekobatoです。

フロントエンドなので、ナウなフロントエンドっぽいライブラリ紹介でもします。


はじめに

周りに「フロントエンドでXHRライブラリ何使ってる?」と聞くと


  • フレームワークに生えてるのを使ってるよ(Angularなど) ←一番多い

  • superagentだよ ←二番目に多い

  • require('http')だよ ←!?

  • JQueryだよ ←最近少ない

  • 素のXHRだよ ←マジかよ

程度に大別される印象です。

私が普段使っているVue.jsだと、request周りは標準で生えていないのでsuperagentを使うことが多いのですが、最近場面によってはaxiosを使うこともあったりします。


axios

axiosとは、Angularの$http serviceに影響を受けたXHRライブラリで、書き方が似たようなものになっています。

私はtj教なのでsuperagentを使いたいのは山々なのですが、どうしてもXHR周りだけ違和感のあるコードになってしまうのが問題になってしまう時は、axiosを使っています。


同一アプリ内の全く同じパラメータ記述問題

なぜaxiosを使い分ける場面が出てくるかというと、同一プロジェクト内では共通の決め事が多いので、毎回同じものを書くことが多くなります。



  • jsonで渡す


  • application/jsonで返ってくる

  • 認証のために決められたHeaderがある

など。

request

.post(url)
.send({ a: b })
// ここから [1]
.set('X-API-Key', 'hogehoge')
// 設定いろいろ
.set('Accept', 'application/json')
// ここまでアプリ内で全部同じ
.end(function(err, res){
// 処理
});

[1]の記述を省略するためにライブラリのwrapperを作るハメになったり、

そのwrapperのせいで制限が出来たので更にwrapperにオプションを...となると

元のライブラリより複雑なwrapperが出来上がったりすることもあったり。

あとフレームワーク内では同一のエラーイベントを飛ばしたいとかの要求が増えると記述が重複するので、その当たりをまとめてhookしたい欲求が出てきます。


axiosのinterceptors

axiosだとinterceptorsが生えているので、requestとresponseのhookが出来る。

axios.interceptors.request.use(function (config) {

config.timeout = 1000;
config.responseType = 'json';
return config;
}, function (error) {
return Promise.reject(error);
});

axios.get() ...
// 以下のXHRでは全て設定が同じ


Promiseを使いたい

周りでthen catchが使われている場合、superagentだと基本チェーンで書いていくので、やはり違和感。

そこにQとか挟むとまたもやwrapperが爆誕するので、axiosに切り替えたほうが無難。

axios.get(options)

.then(successFunction)
.catch(errorFunction)


axios自体の問題

Angularの$httpに似た書き方が出来て使いやすいaxiosなのですが、まだ設定できる項目がsuperagentと比べて少ない(request content-typeによる設定がうまくいかなかったり)ので、他の人の作ったAPIに合わせる場合はsuperagentを使った方が上手くいく印象でした。このあたりは1.0.0を待ちたい。


まとめ

以上、Angularの$httpライクなXHRライブラリ、axiosを紹介しました。

XHRに関してはオレオレXHRを作ったりアプリごとのwrapperを作ったりするのは後で消耗するだけなので、hookできる機能があるだけでかなりすっきりします。

ただ、イベントドリブンなフレームワークの中ではsuperagentでも全てのXHRを受け持つhookが結構簡単に作れるので、そのあたりは好みかなという印象です。

次は弊社で狂犬と呼ばれる@kfly8です。よろしくお願いします。