使用 Axios 捕獲並處理連接被拒絕的錯誤

Question

我將 Axios 用於我的 VueJs 應用程序，並有一個 Express REST Api。 當我的 VueJs 應用程序無法調用后端時（連接被拒絕/節點服務器未運行）

我怎樣才能捕捉到這個錯誤？ 我嘗試使用攔截器記錄錯誤

  instance.interceptors.response.use(res => res, (err) => {
    console.log({ err });

    if (err.response.status === 401) {
      // unauthorized
    }

    return err;
  });

但是在記錄err時我只得到

錯誤：網絡錯誤

response: undefined

我應該注銷用戶，因為那時他無能為力，還是應該只顯示錯誤警報並讓他留下來？

Answer 1

axios.interceptors.response.use(
function ( response ) {
    // response data
    return response;
},
function ( error ) {
    let text = '';
    if ( error.response.data ) {
        text = 'error: ' +error.response.data.error.code + ' || ' + error.response.data.error.message;
    } else if (error.message) {
        // network down
        text = error.message + ' || Server is Down ?';
    } else {
        // http status code and data
        text = error.response.status + ' || ' + error.response.data;
    }
    console.log('axios error message: ',text)

     if ( isNetworkError( error ) ) return alert( 'check your connection' );
    throw error;
    // return Promise.reject( error.message );
});    function isNetworkError ( err ) {
return !!err.isAxiosError && !err.response;}

我注意到如果服務器關閉或無法訪問（如 404） error.response不存在但error.message 。 我正在檢查 error.response（401 等）而不是 error.message（404 或 ERR_CONNECTION_REFUSED）錯誤...

Answer 2

試試這個

axios.interceptors.response.use(
  function(response) {
  return response;
 },
 function(err) {
   if (err.response.status === 401) {
     // unauthorized
   }

    return Promise.reject(err);
  }
);