## 一、概述 通過增加攔截器，可以在axios請求前和響應后，干預行為，提供更靈活的調試或UI效果； 攔截請求執行時序圖：  ## 二、api >[danger] > 1、請求攔截器：在請求之前可以干預的地方執行；第一個函數一定會執行，第二個只有錯誤才會執行； > 2、響應攔截器：在響應后，返回到后端之前，執行；如果響應是正常的（請求到的響應對象的status值為200），則執行第一個函數，如果響應出現異常（請求到的響應對象的status值不是200），則執行第二個函數；響應攔截器執行完之后，才會進入then或catch的處理； ``` // 請求攔截器 axios.interceptors.request.use(function (config) { // 1、在發送請求到后臺處理邏輯之前，可在這里做些什么 return config; }, function (error) { // 2、對請求錯誤做些什么 return Promise.reject(error); }); ``` ``` // 響應攔截器 axios.interceptors.response.use(function (response) { // 1、如果是正確響應了，則可以在這里對響應數據做點什么 return response; }, function (error) { // 2、如果響應的過程，請求的結果里面出錯，則在這里對響應錯誤做點什么 return Promise.reject(error); }); ``` ## 三、實例 ``` //http request 攔截器 this.$axios.interceptors.request.use( config => { console.log(config) return config }, err => { Toast({ message: '加載超時', position: 'middle', duration: 3000 }) return Promise.reject(err) } ) //http response 攔截器 this.$axios.interceptors.response.use( response => { console.log(response) return response }, error => { alert(error.message) return Promise.reject(error) } ) ```