更新的是我csdn上的文章，需要的话可以看下，互相学习点击去我的csdn
vue中axios的封装
在vue项目和后端交互获取数据时，通常使用axios库，官方文档：https://www.npmjs.com/package/axios。
浅谈在项目中axios的简单二次封装
安装
npm install axios; //安装axios
//cnpm install axios;//或者使用镜像下载.
引入组件
通常情况下，在项目src目录下创建request文件夹，然后创建http.js和api.js文件。
- http.js用来二次封装axios；
- api.js用来统一管理后端接口；
在http.js文件中
- 引入axios；
- 引入qs，用于序列化post类型的数据。
- 引入ui提示框，根据自己u进行修改；推荐elementui文档
环境切换
在http.js的文件中的axios.defaults.baseURL可以设置axios的默认请求地址。配合不同的运行指令进行开发不同环境的数据。
另附配置vue不同环境配置不同打包命令
// 环境的切换
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = 'https://www.baidu.com';}
else if (process.env.NODE_ENV == 'debug') {
axios.defaults.baseURL = 'https://www.ceshi.com';
}
else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'https://www.production.com';
}
请求默认值的设置
通过axios.defaults.timeout设置默认的请求超时时间。
//设置默认的请求超时时间
axios.defaults.timeout = 10000;
设置默认请求头和token
//设置post的请求头
axios.defaults.headers.post['Content-Type'] = 'application/json';
//设置默认token 一般有权限不在这里设置
//axios.defaults.headers.Authorization=token;
请求拦截
token拦截
一般情况下，发送请求必须带有token进行验证。做权限的话这里需要注意。
axios.interceptors.request.use(
config => {
let token = localStorage.getItem("header");
if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
config.headers.token = `${token}`;
}
return config;
},
err => {
this.$router.push("/login")
return Promise.reject(err);
});
响应拦截
这里需要根据后端协商，根据后端返回状态码进行处理
axios.interceptors.response.use(function (response) {
if (response.status >= 400) {
localStorage.clear();// 删除已经失效或过期的token（不删除也可以，因为登录后覆盖）
router.replace({
path: '/login', // 到登录页重新获取token
query: {
//回到当前页面
redirect: router.currentRoute.fullPath
}
})
}
return response
}, function (error) {
if (error.response) {
if(error.response.status===403){
Message({
showClose: true,
message: '登录过期',
type: 'error'
});
localStorage.clear();
Cookies.set("user","",-10);
router.replace({
path: '/login' // 到登录页重新获取token
})
}else if(error.response.status===405){
Message({
showClose: true,
message: '权限不足,请联系管理员',
type: 'warning'
});
router.replace({
path: '/error',
})
}else if(error.response.status===500){
Message({
showClose: true,
message: '服务器异常',
type: 'error'
});
}
}
return Promise.reject(error)
})
封装get和post方法
axios封装的方法有很多，比如get,post,delete,put等方法。这里简单介绍get和post的封装。
post
/**
* post方法，对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
get
/**
* get方法，对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err => {
reject(err.data)
})
});
}
vue中api的封装
首先在api.js中引入在http.js中封装的get和post两种方法。
import { get, post } from './http'
不同参数的封装接口方法
export const Login = p => get('/api/admin/login', p);
export const Registry = p => post('/api/admin/registry', p);
//路径参数封装
//export const Api= p => post('/api/'+ p);
//多参数封装
export const Api=（ p，q ）=> post('/api/'+ p+“/"+q);
页面中使用方法
import { Login,Registry } from "@/request/api"
export default {
name:"app",
data(){
return{
message:{
uname:"",
upwd:""
}
}
},
methods:{
login(){
Login(this.message).then(res=>{
....请求成功的处理
})
}
}
}
例外附上：