一、現象
統一處理錯誤及配置請求信息
二、解決
1、安裝 axios , 命令： npm install axios --save-dev
2、在根目錄的config目錄下新建文件 axios.js ，內容如下：
import axios from 'axios'
// 配置默認的host,假如你的API host是：http://api.htmlx.club
axios.defaults.baseURL = 'http://api.htmlx.club'
// 添加請求攔截器
axios.interceptors.request.use(function (config) {
// 在發送請求之前做些什么
return config
}, function (error) {
// 對請求錯誤做些什么
return Promise.reject(error)
});
// 添加響應攔截器
axios.interceptors.response.use(function (response) {
// 對響應數據做點什么
return response
}, function (error) {
// 對響應錯誤做點什么
return Promise.reject(error)
});
3、在main.js中進行引用，並配置一個別名（$ajax）來進行調用:
import axios from 'axios'
import '../config/axios'
Vue.prototype.$ajax = axios
如圖：
4、應用，一個登錄的post如：
this.$ajax({
method: 'post',
url: '/login',
data: {
'userName': 'xxx',
'password': 'xxx'
}
}).then(res => {
console.log(res)
})
5、當頁面靜止放置太久時，請求出現超時，點擊頁面不進行刷新數據時，可以響應攔截器處添加404的錯誤處理，如響應攔截器修改為：
// 添加響應攔截器
axios.interceptors.response.use(function (response) {
// 對響應數據做點什么
return response
}, function (error) {
// 對響應錯誤做點什么
// 兼容處理超時時返回的404
if (responseError && responseError.response && responseError.response.status === 404) {
// 比如跳轉到登錄頁
router.push({ name: 'login' })
}
});
三、總結
統一處理方便