【JavaScript】axiosのエラーを共通の処理で拾う

Tweet

Category JavaScript 2019/08/20

問題

axiosでエラーが発生したとき（2xx以外のレスポンスのとき）、unhandledrejectionは使えますか？

答え

こんなことはできる。

window.addEventListener("unhandledrejection", function(event) {
    if (event.reason.response.status == 403) {
        console.log('許可されていない操作です');
    } else if (event.reason.response.status == 401) {
        console.log('ログアウトしています');
    }
});

axiosのリクエストでレスポンスが2xxでないとき、unhandledrejectionで拾うことはできる。

ただ状況によらず Promise.reject() などしただけでも unhandledrejection が発生するので、event.reason.response.status なんてない状況を拾うこともありうる。

axiosのエラーを拾いたいのなら、素直に .catch するか、axios.interceptors.response.use で設定するのがよいでしょう。

axios.interceptors.response.use(
	function(response) {
		return response
	},
	function(error) {
		// 何らかの処理が可能
		if (error.response.status == 401) {
			//
		} else if (error.response.status == 403) {
			//
		}
		return Promise.reject(error)
	}
)

例外として投げる例

axios.interceptors.response.use(
  response => response,
  error => {
    throw error
  }
))