主に開発時に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を追加してあげることで実現しています。