npm i axios 下载axios插件
main.js设置
import axios from 'axios'; //引入axios请求
axios.defaults.withCredentials=true; 为true是跨域时携带用户用户凭证 false不会携带用户凭证
创建request.js文件
import axios from 'axios'
import {
Message, MessageBox} from 'element-ui'
// var root = process.env.BASE_API
// 创建axios实例
const service = axios.create({
baseURL: '/manager', // api的base_url
timeout: 35000, // 请求超时时间
headers:{
'Account':localStorage.getItem("accountnumber"),
'Authorization':'Bearer '+localStorage.getItem("authorization"),
},
});
// request拦截器
// service.interceptors.request.use(config => {
// // if (store.getters.token) {
// // config.headers['Authorization'] = getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
// // }
// config.url=root+config.url
// console.log(config.url)
// return config
// }, error => {
// // Do something with request error
// // console.log(error) // for debug
// // Promise.reject(error)
// })
// respone拦截器
let count = 0;
service.interceptors.response.use(
response => {
const res = response.data;
if (res.code !== 200) {
// 401:未登录;
if (res.code === 600) {
if(count==0){
MessageBox.confirm('该用户访问超时，请重新登录', '访问超时提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
})
}
++count;
}else if(res.code===400){
MessageBox.alert(res.message,'提示',{
confirmButtonText:'好的',
type:'error'
})
return response;
}
else if(res.code===405){
MessageBox.alert('操作过于频繁，请稍后操作','提示',{
confirmButtonText:'好的',
type:'error'
})
return response;
}
// return Promise.reject('error')
} else {
return response;
}
},
error => {
console.log(error);
console.log('err' + error)// for debug
Message({
message: error.message,
type: 'error',
duration: 3 * 1000
})
return Promise.reject(error)
}
)
export default service
api统一管理 创建api.js
import request from '@/utils/request' //引入request文件
//请求
export function 请求名() {
return request({
url:'',//请求地址后缀
method:'get', //设置请求方式 get post
})
}
//如果需要把参数放到请求地址上
export function 请求名(params) {
return request({
url:''+params,
method:'get',
})
}
//如果需要放固定参数
export function 请求名(params) {
return request({
url:'',
method:'get',
params:{
参数名:params}
})
}
如果需要设置前端代理 创建vue.config.js文件
module.exports = {
dev: {
assetsPublicPath: '/',
proxyTable: {
'/api': {
// target: `请求接口域名`,
changeOrigin: true,
pathRewrite: {
"^/api": '/'
}
}
},
}
特别注意
如果请求地址和前端页面不在同一服务器 跨服务的情况下,需要nginx配置一下反向代理 不然接口请求会404找不到接口,这个需要给后端同志说明一下