エラー応答コードにグローバルaxios configを設定する方法はありますか

Question

私はreact/reduxアプリケーションでaxiosを使用しています.401,404などのエラーが発生した場合、現在は各アクション関数私は斧に電話をかけます。私はaxios_config.jsを持っています。ここでいくつかの共通の慣用表現でAxiosコールをラップしています。たとえば：

export function fetchBrands() { 
    return function(dispatch) { 
    dispatch({type:FETCHING_BRANDS}); 

    fetchData('brands') 
     .then(response => { 
     dispatch({ 
      type: FETCH_BRANDS_SUCCESS, 
      payload: response 
     }); 
     }) 
     .catch(err => { 
     // deal with errors 
     }); 
    } 
} 

しかしcatchブロックで、私は「ドン：私は苦労してる

// need to move this to app config 
const BASE_URL = 'http://localhost:8080/api/'; 

function config() { 
    return { 
    headers: {'X-Token-Auth': localStorage.getItem('token')} 
    } 
} 

export function fetchData(url) { 
    return axios.get(`${BASE_URL}${url}`, config()); 
}; 

は401、404、など現在のように、私はこれをやっている一般的なエラーです毎回401、404などに対処しなければならない。だから私はよりグローバルな規模でそれらに対処することができる必要がありますが、依然としてサーバー側の検証エラーのような要求に特定のエラーを処理する能力があります。

Answer 1

関数を受け取り、catchを付けて関数を返すことができます。オプションの第2引数を渡して、ローカルキャッチロジックを実行することもできます。

このファイルを1つのファイルに移動することができ、いつでもそのファイルを変更できます。

export function fetchBrand(id) { 
 
    return function (dispatch) { 
 
    wrapCatch(
 
     fetchData(`brands/${id}`) 
 
     .then(response => { 
 
      dispatch({ 
 
      type: FETCH_BRAND_SUCCESS, 
 
      payload: response 
 
      }); 
 
     }), 
 
     function (err) { 
 
     // deal with errors 
 
     } 
 
    ); 
 
    } 
 
} 
 
    
 
export function wrapCatch(f, localErrors) { 
 
    return f.catch(err => { 
 
     // deal with errors 
 
     localErrors(); 
 
    }); 
 
}

この情報がお役に立てば幸いです。

Answer 2

レスポンス・インターセプタは、axiosドキュメントのドキュメントとして使用できます。

axios.interceptors.response.use(undefined, function (error) { 
 
    if(error.response.status === 401) { 
 
     ipcRenderer.send('response-unauthenticated'); 
 
     return Promise.reject(error); 
 
    } 
 
    });

other thread with same discussion