axiosのリクエストとレスポンスの内容をconsole.logで共通的に出力する方法

主に開発時にaxiosのリクエスト内容、そしてレスポンスの内容を確認したいことがあると思います。

今回はそんなニーズに対し、各タイミングで内容をconsoleに出力する方法を考えていきたいと思いつず。

結論: axiosのinterceptorsを利用して出力処理を挟んでおく

axios.interceptors.request.use(request => {
  console.log('Starting Request: ', request)
  return request
})

axios.interceptors.response.use(response => {
  console.log('Response: ', response)
  return response
})

axios.get('https://yesno.wtf/api')

// Starting Request: {リクエスト内容} <- consoleに出力される

// Response: {レスポンス内容} <- consoleに出力される

上記の処理を記述すると、axiosの各メソッド実行時にRequestとResponseの内容がconsoleに出力されるようになります。

考察

responseだけであればthen()メソッドの内部でconsole.logを実行すればいいのですが、ロジック部分にconsole.logを書き込むのは煩雑ですし、requestの内容を出力するとなるとやや面倒です。

そのためinterceptor、つまりrequest実行時とresponse受取時に処理を追加する部分でconsole.logを追加してあげることで実現しています。

参考

• axiosを乗りこなす機能についての知見集
• How to log all axios calls from one place in code