一、版本说明
"vue": "^2.5.2",
"axios": "^0.18.1",
"element-ui": "^2.5.4"
二、 封装 Axios
import axios from 'axios';
import Vue from 'vue';
import router from './router';
import {
showFullScreenLoading,
tryHideFullScreenLoading,
} from './api/servicesHelp'
//未登录标志
let errFlag = false;
export const service = axios.create({
baseURL: "http://xx.xx.xx.xx:xxxx/", // 请求地址
timeout: 1000 * 10, // 请求时间限制
withCredentials: true,
headers: {
'Cache-Control': 'no-cache', // 清除缓存
'Pragma': 'no-cache'
}
})
// request拦截器
service.interceptors.request.use(config => {
// 设置请求头 Accept
config.headers.Accept = "application/json, text/plain, */*";
// 请求时,打开加载效果
if (config.showLoading) {
showFullScreenLoading()
}
return config
}, error => {
return Promise.reject(error)
})
// response拦截器
service.interceptors.response.use(response => {
// 请求成功响应时,即请求结束,关闭加载效果
if (response.config.showLoading) {
tryHideFullScreenLoading()
}
// 初始化未登录标志 -- 可选
if (response.data.status == 200 && response.config.url.indexOf('/user/customer/login') != '-1') {
errFlag = false;
}
// 限制提示框弹出一次 -- 可选
if (response.data.status == 401 && !errFlag) {
errFlag = true;
localStorage.removeItem("user");
Vue.prototype.$alert(response.data.info, '警告', {
confirmButtonText: '请重新登录',
callback: action => {
window.whetherLoginFlag = false; // 初始化登录标志,根据实际情况修改
router.push('/'); // 登录路由地址
}
});
return
}
return response;
}, error => {
// 请求返回错误码时,关闭加载效果
tryHideFullScreenLoading()
// console.log(error)
if (error && error.response) {
switch (error.response.status) {
case 400: error.message = '请求错误(400)'; break;
case 401: error.message = '未授权,请登录(401)'; break;
case 403: error.message = '拒绝访问(403)'; break;
case 404: error.message = `请求地址出错: ${error.response.config.url}`; break;
case 405: error.message = '请求方法未允许(405)'; break;
case 408: error.message = '请求超时(408)'; break;
case 500: error.message = '服务器内部错误(500)'; break;
case 501: error.message = '服务未实现(501)'; break;
case 502: error.message = '网络错误(502)'; break;
case 503: error.message = '服务不可用(503)'; break;
case 504: error.message = '网络超时(504)'; break;
case 505: error.message = 'HTTP版本不受支持(505)'; break;
default: error.message = `连接错误: ${error.message}`;
}
} else {
error.message = '连接到服务器失败,请联系管理员'
}
if (!errFlag){
errFlag = true;
// 用户未登录时,跳转到登录页
Vue.prototype.$alert(error.message, '警告', {
confirmButtonText: '确定',
callback: action => {
// 用户未登录时,跳转到登录页 ,根据实际情况修改
if(localStorage.getItem("user") == null) {
router.push('/');
}
}
});
return;
}
return Promise.reject(error)
}
)
2.1、 'servicesHelp.js' 文件中的内容,参考这里
三、请求接口时的使用方法(如 get、post)
3.1、单个组件引入使用
3.2、全局引入使用
main.js 文件中引入
写给自己的随笔,有问题欢迎指出(Θ▽Θ)