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

superagentとaxiosの使い分け

More than 3 years have 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です。よろしくお願いします。

nekobato
mercari
フリマアプリ「メルカリ」を、グローバルで開発しています。
https://tech.mercari.com/
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
ユーザーは見つかりませんでした