vue-cli axios封裝（element-ui）

標籤：config   inter   逾時   cas   sage   loading   服務   type   strong   

1.http.js

/**
*
* http配置
*/

import axios from ‘axios‘
import { Loading, Message } from ‘element-ui‘

// axios 配置
axios.defaults.timeout = 5000;

// http request 攔截器
axios.interceptors.request.use(
config => {
// if (store.state.token) {
// config.headers.Authorization = `token ${store.state.token}`;
// }
return config;
},
err => {
return Promise.reject(err);
});

// http response 攔截器
axios.interceptors.response.use(
response=> {
　
return response;
},
err => {
if (err && err.response) {
switch (err.response.status) {
case 400:
Message.error(‘請求錯誤‘)
break

case 401:
Message.error(‘未授權，請登入‘)
break

case 403:
Message.error(‘拒絕訪問‘)
break

case 404:
Message.error(`請求地址出錯: ${err.response.config.url}`)
break

case 408:
Message.error(‘請求逾時‘)
break

case 500:
Message.error(‘伺服器內部錯誤‘)
break

case 501:
Message.error(‘服務未實現‘)
break

case 502:
Message.error(‘網關錯誤‘)
break

case 503:
Message.error(‘服務不可用‘)
break

case 504:
Message.error(‘網關逾時‘)
break

case 505:
Message.error(‘HTTP版本不受支援‘)
break

default:
}
}

return Promise.reject(err)
});

export default axios;

2.main.js

import axios from ‘./assets/js/http.js‘

Vue.prototype.$http = axios

vue-cli axios封裝（element-ui）