Axios: Cara Intercept Server Response Secara Global

Banyak cara yang dapat dilakukan untuk menghandel error response dari server menggunakan axios. Misalnya saja saat token user sudah expired dan request yang dilakukannya menjadi unauthenticated maka kita bisa menghandel error tersebut langsung dari masing-masing request. Bisa menggunakan catch atau melalui promise then.

Namun, jika kita telah mengimplementasikan request itu secara massive dan susah untuk mengeditnya satu persatu untuk menambahkan handel error maka kita bisa menambahkan interceptor secara global.

Axios menyediakan dua model interceptor yaitu untuk sisi request dan untuk sisi response. Pada kesempatan kali ini, interceptor yang akan digunakan adalah sisi response.

Sekenario Implementasi Interceptor

Aku menggunakan backend laravel untuk mengirim pesan error jika token seorang user sudah expired atau sudah tidak valid lagi. Pesan error dari server ini berformat sebagai berikut:

{code: 401, [], "Unauthenticated"}

Jika axios mendapatkan response dengan code 401 maka aku memerintakannya untuk menghapus token dari localStorage kemudian mengalihkan pengguna ke halaman login.

Implementasi Interceptor Untuk 401 Unauthenticated

Kodingan untuk intercept error 401 adalah sebagi berikut:

axios.interceptors.response.use(function (response) {
    if (response.data.code === 401) {
        localStorage.removeItem('token')
        location.href = '/login'
    }
    return response;
}, function (error) {

  //bagian ini belum digunakan
    return Promise.reject(error);
});