• 149
    Like
  • 0
    Comment

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

This post is the No.1 article of モバイルファクトリー Advent Calendar 2015