引入
import axios from 'axios'
import router from '../router/index' //vue路由
import QS from 'qs'; //將url中的參數轉爲對象;將對象轉爲url參數形式
import { Message } from 'element-ui'; //element的提示信息
環境切換
使用npm run build打包後爲生產環境,根據process.env.NODE_ENV進行環境切換
npm run dev爲開發環境
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = 'http://127.0.0.1:8989';
}else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'http://101.201.57.175:8989';
}
設置請求超時
axios.defaults.timeout = 10000
post請求頭的設置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
攔截器
//添加請求攔截器
axios.interceptors.request.use(function(config) { //在發送請求之前做一些事情return config; },function(error) { //做一些有請求錯誤的事情return Promise .reject(error ); });
//添加響應攔截器
axios.interceptors.response.use(function(response) { //使用響應數據返回響應; },function(error) { //使用響應錯誤返回Promise .reject(error) ; });
完整代碼
import axios from 'axios'
import router from '../router/index'
import QS from 'qs'; //將url中的參數轉爲對象;將對象轉爲url參數形式
import { Message } from 'element-ui';
//防止提示信息過多
let flag = true
// 環境切換
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = 'http://127.0.0.1:8989';
}else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'http://101.201.57.175:8989';
}
// 請求超時
axios.defaults.timeout = 10000
// post請求頭的設置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 請求攔截器
axios.interceptors.request.use(function (config) {
// 加入token
const token = localStorage.getItem('token')
token && (config.headers.Authorization = 'Bearer ' + token)
return config
}, function (error) {
// 對請求錯誤做些什麼
return Promise.reject(error)
})
// 響應攔截器
axios.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response)
} else {
return Promise.reject(response)
}
},
error => {
if (error.response.status) {
switch (error.response.status) {
case 400:
Message.error('錯誤請求');
break;
case 401:
if (flag) {
Message.error('未登錄,正在跳轉登錄頁!');
flag = false
}
setTimeout(() => {
router.replace({ path: '/login' })
flag = true
}, 1500)
break
case 403:
Message.error('登錄信息已過期,正在跳轉登錄頁');
localStorage.removeItem('token')// 清除token
setTimeout(() => {
router.replace({ path: '/login' })
}, 1000)
break
case 404:
Message.error('請求錯誤,未找到該資源');
break;
case 405:
Message.error('請求方法未允許');
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:
error.message = `連接錯誤${error.response.status}`
break;
}
return Promise.reject(error.response)
}
}
)
// 封裝get
function get(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
})
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
// 封裝post
function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, QS.stringify(params))
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
export {axios,get,post}
main.js
import {axios,get,post} from './request/api' // 對axios進行封裝
Vue.prototype.$axios = axios
Vue.prototype.$get = get
Vue.prototype.$post = post