为什么要封装axios我就不多说了,总而言之就是为了方便开发
配置
如果需要配置跨域代理的话,可以先看看我这篇文章:vue-cli配置跨域
全局方法
新建src/request/http.js
/**axios封装
* 请求拦截、相应拦截、错误统一处理
*/
import axios from 'axios';
import router from '@/router'
// 环境的切换
//开发环境和部署环境
// const url = process.env.NODE_ENV === 'development' ? "http://168.0.0.119:8080" : "";
// axios.defaults.baseURL = url;
// axios.defaults.withCredentials = true; //让axios携带cookie
// 创建axios实例
var instance = axios.create({
timeout: 1000 * 12
});
// 设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/**
* 跳转登录页
* 携带当前页面路由,以期在登录页面完成登录后返回当前页面
*/
const toLogin = () = >{
// 清除用户登录信息
localStorage.removeItem('user');
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}
// 请求拦截器
axios.interceptors.request.use((req) = >{
return req;
},
error = >{
return Promise.error(error);
})
/**
* 请求失败后的错误统一处理
* @param {Number} status 请求失败的状态码
*/
const errorHandle = (status, other) = >{
// 状态码判断
switch (status) {
// 401: 未登录状态,跳转登录页
case 401:
toLogin();
break;
// 403 token过期
// 清除token并跳转登录页
case 403:
setTimeout(() = >{
toLogin();
},
1000);
break;
// 404请求不存在
case 404:
break;
default:
console.log(other);
}
}
// 响应拦截器
instance.interceptors.response.use(
// 请求成功
res = >res.status === 200 ? Promise.resolve(res) : Promise.reject(res),
// 请求失败
error = >{
const {
response
} = error;
if (response) {
// 请求已发出,但是不在2xx的范围
errorHandle(response.status, response.data.message);
return Promise.reject(response);
} else {
// 处理断网的情况
console.log('断网了') return Promise.reject('-1');
}
});
export
default instance;
具体调用api方法
新建src/request/api.js
import axios from '@/request/http'; // 导入http中创建的axios实例
const base = {
signIn: '/login/signin',
//登录
queryOrg: '/api/org/query',
//获取组织
addOrg: '/api/org/add',
//增加组织
editOrg: '/api/org/update',
//修改组织
delOrg: '/api/org/delete'//删除组织
//......
}
//登录
const login = {
signIn: (params) => { return axios.post(`${base.signIn}`, params) }
}
//组织
const org = {
query: (params) => { return axios.get(`${base.queryOrg}`, { params: params }) },
add: (params) => { return axios.post(`${base.addOrg}`, params) },
edit: (params) => { return axios.put(`${base.editOrg}`, params) },
del: (params) => { return axios.delete(`${base.delOrg}/${params}`) },
}
export default {
login,
org,
//......
|'
使用
挂载
src/main.js
import api from '@/request/api' // 导入api接口
Vue.prototype.$api = api; // 将api挂载到vue的原型上
实际使用
this.$api.org.query(params).then(res = >{}).
catch(err = >{})