在我们使用vue开发的时候，请求后台我们通常使用axios这些第三方库来实现，但是我们在使用的时候，遇到一个问题，我们每一个请求都需要带上token,这样就增加了我们的重复工作量。
所以，我们可以对axios做一个封装，让我们使用它的时候，自动带入token和url的前缀（url的前缀生产环境和开发环境可以不同）
好了，直接上代码：
import axios from 'axios'
import Vue from 'vue';
import qs from 'qs';
//import store from '@/store';
import { MessageBox, Message,Notification,Loading } from 'element-ui';
import router from '@/router/index.js';
//import store from '@/store'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
timeout: 30000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
//store.commit("app/SHOW_LOADING");//一个用vuex实现的全局变量，用来展示是否loadding中
if(config.method === 'post') {
if(config.isObj&&config.isObj===true)
{
//假如传入isObj=true,.则使用默认的application/json格式调用接口
}
else if(config.isFile&&config.isFile===true)
{
config.headers.post['Content-Type'] = 'multipart/form-data';
}
else{
config.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
config.data = qs.stringify(config.data);
}
}
let token = sessionStorage.getItem("token");
if (token&&token!=='') {
config.headers['token'] = token // 让每个请求携带自定义token 请根据实际情况自行修改
}
return config
},
error => {
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(res => {
//store.commit("app/HIDE_LOADING");
const code = res.data.code
if (code === -1) {
sessionStorage.removeItem("token");
router.push("/login");
} else if (code !== 1) {
Notification.error({
title: res.data.msg,
})
return Promise.reject(res.data)
} else {
return res.data
}
},
error => {
//store.commit("app/HIDE_LOADING");
console.log('err' + error)
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
使用的时候的调用方法：
//json的上传格式：
request({
url: '/abcdefg',
method: 'post',
data: { name:'aaa',sex:'男'},
isObj:true
}).then(res => {
console.log("收到回复：",res);
});
//form表单的上传格式：
request({
url: '/abcdefg',
method: 'post',
data: { name:'aaa',sex:'男'}
}).then(res => {
console.log("收到回复：",res);
});其中，VUE_APP_BASE_API需要在.env.development和.env.production里定义开发环境和生产环境的请求地址，这样vue就会自动根据是测试环境还是生产环境来访问后台正确的接口地址前缀。
比如：
在.env.development中定义：
VUE_APP_BASE_API = 'http://127.0.0.1:8082/api'
在.env.production中定义：
VUE_APP_BASE_API = 'https://www.xxxxxx.com/api'
假如需要走代理，可以在.env.development这样定义
扫描二维码关注公众号，回复：
12470171 查看本文章
VUE_APP_BASE_API = '/api'
再在vue.config.js里定义代理
devServer: {
host: '0.0.0.0',
port: 3366,
proxy: {
['/api']: {
target: `http://192.168.1.66:8003/api`,
changeOrigin: true,
pathRewrite: {
['^' + "/api"]: ''
}
}
},
disableHostCheck: true
},