Superagentでの共通処理

superagentで共通処理をする方法

Reactで開発しているとsuperagentかfetchAPIを使うことが多いと思うが、superagentで成功時も失敗時でも行う共通処理の書き方を調べるのにちょっと苦労したので投稿。

答え

superagent.js

fetchData () {
 request
  .get(url)
  // 省略
  .then(res => {
  // 成功時
  })
  .catch(err => {
  // 失敗時
  })
  .then(() => {
  // ここが共通処理
  }
}

このように、thenをcatchの後にもう一度書くと、成功時にも失敗時にも実行する処理がかけます。
この書き方だと、２つ目のthenは、１つ目のthenかcatchの中が終了してから実行されます。これは、then内にあるコールバック関数()=>{}によるもので、もし、共通処理を最初に行いたいなら、

superagent.js

fetchData () {
 request
  .get(url)
  // 省略
  .then(
  // 共通処理
  )
  .then(res => {
  // 成功時
  }
  .catch(err => {
  // 失敗時
  }
}

みたいに、（アロー）関数を外してやればOKです。

then/catchじゃなくてendとか使ってるのは古い

ちなみに、then/catchでなくend((res,err)=>{})なんか使ってるのはもう古いのでthen/catchに変えていこう

なんで苦労したか

superagentのドキュメントにはthen/catchは書いてあるが、共通処理については記述がなかった。Githubのソースコードを読み、superagentがPromiseを用いた実装であるとわかった（知らなかった...）ので、Promiseでのやり方を調べたら解決した。fetchAPIも同じようにやれます。

おまけ

superagentとfetchAPIのどちらがいいかは人によるが、ReactNativeはfetchAPIをサポートしてるので、Reactで使うならfetchAPIでいいんじゃないかと思っている。