モバイルファクトリー 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です。よろしくお願いします。