更好的反應應用程序範圍內的axios請求處理返回錯誤狀態401

Question

我有一個SPA應用程序內置React與API的許多axios調用。當錯誤狀態返回401時，我可以設置重定向到axios中的登錄頁面，但是有大量的調用分佈在很多組件中，是否有更好的方式來處理這個問題而不需要重複：

if (error.status === 401) { 
    //redirect to login page 
} 

在每一個請求

Answer 1

避免寫在所有組件的API調用，創建一個單獨的文件api.js或一些abc.js，寫撥打電話的一般方法，並調用不同組件，方法與合適的參數。在這種情況下，您需要處理每個文件中的所有類型的案例，只需將邏輯放在api.js文件中的一個位置即可。

api.js：

export function _callAPI(url, method, data, target){ 
    /* 
     url: separate url for different component 
     method: Get or Post or Put etc 
     data: if required to pass 
     target: callback method 
    */ 
} 

然後在不同的組件導入此：

import * as Api from 'path to api.js file'; 

調用方式：

Api._callAPI(url, method, data, (data) => { 
    console.log(data); 
})