axios攔截器的使用方法

很多時候我們需要在發送請求和響應數據的時候做一些頁面處理，比如在請求服務器之前先判斷以下用戶是登錄(通過token判斷),或者設置請求頭header，或者在請求到數據之前頁面顯示loading等等，還有在響應到數據的之后做一些判斷，例如服務器返回401登錄狀態失效，需要重新登錄的時候，跳轉到登錄頁，請求成功后關閉頁面loading等，這個時候我們就可以用到axios攔截器來做這一系列的事情。

axios攔截器分為請求攔截器和響應攔截器兩種。

請求攔截器

axios.interceptors.request.use(config => { // 在發送請求之前做些什么，例如加入token
 ....... return config; }, function (error) { // 對請求錯誤做些什么
    return Promise.reject(error); });

響應攔截器

axios.interceptors.response.use(function (response) { // 在接收響應做些什么，例如跳轉到登錄頁
 ...... return response; }, function (error) { // 對響應錯誤做點什么
    return Promise.reject(error); });

完整代碼：

export function request(config) { // 1、創建axios實例
  const instance = axios.create({ baseURL: "http://106.54.54.237:8000/api/v1", timeout: 10000 }); // 2、axios的請求攔截器
 instance.interceptors.request.use( req => { Toast.loading({ // loading的時候禁止點擊
        forbidClick: true, message: "加載中..." }); return req; //攔截完再發送出去
 }, err => { return Promise.reject(err); } ); // 3、axios的響應攔截器
 instance.interceptors.response.use( res => { // 保證最少500毫秒的加載時間
      setTimeout(() => { Toast.clear(); }, 500); return res.data; //攔截完再返回數據
 }, err => { return Promise.reject(err); } ); //發送真正的請求
  return instance(config); }

 https://blog.csdn.net/weixin_39378691/article/details/83750056