npm install axios
在until工具文件夹下新建request.js文件,封装axios代码如下:
//针对axios封装的ajax请求工具类
import axios from 'axios'
import {Message} from 'element-ui'
// 先导入vuex,因为要使用到里面的状态对象
// vuex的路径根据自己的路径去写
import store from '@/store/index';
const service=axios.create({
baseURL:process.env.APP_BASE_API, //环境设置
timeout:5000
})
//请求拦截器
service.interceptors.request.use(
config=>{
// 每次发送请求之前判断是否存在token
// 如果存在,则统一在http请求的header都加上token,这样后台根据token判断你的登录情况
// 即使本地存在token,token也有可能是过期的,所以在响应拦截器中要对返回状态进行判断
const token = store.state.token;
token && (config.headers.Authorization = token);
// config.headers['token']='' //没有登陆界面时,可以不携带token
return config
},
error=>{
return Promise.reject(error)
}
)
//响应拦截器
service.interceptors.response.use(
response=>{
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据,否则的话抛出错误
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服务器状态码不是2开头的的情况
// 这里可以跟后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作,例如登录过期提示,错误提示等
// 下面列举几个常见的操作,其他需求可自行扩展
error=>{
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面,并携带当前页面的路径
// 在登录成功后返回当前页面,这一步需要在登录页操作。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Message({
message: '登录过期,请重新登录',
type:"waring"
duration: 1000,
});
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404请求不存在
case 404:
Message({
message: '网络请求不存在',
type:'waring',
duration: 2*1000,
});
break;
// 其他错误,直接抛出错误提示
default:
Message({
message: error.response.data.message,
type:'error',
duration: 2*1000,
});
}
return Promise.reject(error.response);
}
}
)
export default service
注:Message我是用的element-Ui框架中的插件,可根据个人情况设置提示信息。
在根目录下新建:.env.development ,开发环境的配置文件,输入如下代码:
VUE_APP_ENV ='development'
VUE_APP_API_BASE='/'
在根目录下新建:.env.production ,生产环境的配置文件,输入如下代码:
VUE_APP_ENV ='production'
VUE_APP_API_BASE='/'
注:
在api文件夹下新建一个如user.js文件,封装get和post请求方式,如下:
//先导入封装的axios文件
import request from '@/utils/request'
export function postUserData(data){ //这里方法与后台Controller方法名一致就可以
return request({
url:'请求地址',
method:'post', //post请求方式
data
})
}
export function getUserData(data){
return request({
url:'请求地址',
method:'get', //get请求方式
data
})
}
首先在使用的vue文件中导入调用的方法:
import { postUserData,getUserData } from "@/api/user.js";
在需要发送请求的地方使用方法,已getUserData 为例:
initData(){
var query={ //可根据实际需求传响应的参数
pageIndex:1,
pageSize:20 ,
}
getUserData(query).then(res=>{
console.log(res)
})
}