攔截器（Interceptors）可以在請求發送或響應接收之前進行一些公共的處理，例如添加統一的請求頭部、設置公共的參數、對響應結果進行統一處理等。Vue中的axios攔截器能夠讓我們在請求和響應過程中對一些數據進行攔截，實現一個可定制化、公共化的靈活調用機制。

Element UI 是一個UI框架，基于Vue開發。它提供了豐富的組件庫、組件風格多樣化、豐富的文檔和易于上手的設計等優點，使得它成為了Vue開發中的一個重要利器。

Element UI可以與axios搭配使用，能夠進行前端開發所需的常見的HTTP請求和響應操作。我們可以通過axios攔截器來對響應結果進行統一攔截處理，下面將介紹具體的攔截器實現代碼。

import axios from 'axios'
import { Message } from 'element-ui'
// 全局的axios攔截器
axios.interceptors.response.use(response =>{
const res = response.data
if (res.code !== 20000) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
// 這里返回一個 Promise.reject()，后續請求不會執行
return Promise.reject('error')
} else {
// 返回結果，繼續請求
return res
}
}, error =>{
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
// 返回一個 Promise.reject()，可被后續then或catch語句捕獲
return Promise.reject(error)
})

在上述攔截器中，我們針對HTTP請求中的錯誤信息進行了統一攔截處理。如果響應結果中的狀態碼不為20000，則將會彈出一個Element UI小提示框，告訴用戶出現了哪些錯誤。此外，返回Promise.reject()函數可被后面的catch語句捕獲，實現了統一處理和錯誤處理。

此攔截器才是整個Element UI + axios請求的核心代碼！需要注意的是，如果你通過webpack打包的方式引入Element-UI，請使用this.$message，而不是Message。如果你使用了CDN引入，前綴則是_ELEMENT。

message: this.$message.error(res.message || '系統錯誤，請聯系管理員'); // 如果是 webpack 模式
message: _ELEMENT.Message.error(res.msg || '系統錯誤，請聯系管理員'); // 如果是CDN引入模式

使用攔截器之后，我們就可以打通Vue、Element UI、axios這個前端開發三線，為開發人員帶來更加便捷的開發體驗，以及更加優秀的開發效果。