装好你的axios 和element-ui 上车
创建request.js文件
token放请求头Authorization这里request给后端,后端也会response回来Authorization携带token,这里看自己需不需要vuex 定义token,根据自己的需求哈
import axios from "axios";
import store from '../../store/index';
import {Loading,Notification} from 'element-ui';
var _that=this;
//请求头
//axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //此处是增加的代码,设置请求头的类型
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
timeout: 50000 // request timeout
})
// 请求拦截器
axios.interceptors.request.use(
config => {
//登陆凭证
//拼接bearer
var token='bearer '+store.state.token;
// 每次发送请求之前判断是否存在token
// 如果存在,则统一在http请求的header都加上token,这样后台根据token判断你的登录情况,此处token一般是用户完成登录后储存到localstorage里的
config.headers.Authorization = token?token:"";
return config
},
error => {
return Promise.error(error)
})
// 响应拦截器
axios.interceptors.response.use(response => {
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
if (response.data.code === 511) {
// 未授权调取授权接口
} else if (response.data.code === -201) {
//弹窗提示
Notification.error("登陆过期");
//登陆凭证过期跳回登陆页面
setTimeout(()=>{
_that.$router.push({ name: 'login'});
},2000)
// 未登录跳转登录页
} else {
//获取登陆接口请求头的登陆凭证
var token=response.headers.authorization;
if(token){
//截取掉bearer
token=token.substring(7,token.length);
store.commit('token',token);
window.localStorage.setItem("token",token);
//存储cookie
if(document.cookie){
document.cookie="token="+token;
}
}else{
console.error("接口response请求头部没有返回authorization")
}
return Promise.resolve(response)
}
} else {
return Promise.reject(response)
}
}, error => {
// 我们可以在这里对异常状态作统一处理
if (error.response.status) {
if(error.status != 200){
//弹窗提示
// Notification.error("服务器异常");
console.error(error.response);
}
// 对不同返回码对相应处理
// 处理请求失败的情况
return Promise.reject(error.response)
}
})
let loadinginstace; //load加载
// get 请求
export function httpGet({url, params = {},loading}) {
if(loading){
loadinginstace = Loading.service({fullscreen: true}) // 请求打开loading
}
return new Promise((resolve, reject) => {
axios.get(url, {
params
}).then((res) => {
//关闭loading
if(loading){
loadinginstace.close();
}
resolve(res)
}).catch(err => {
//关闭loading
if(loading){
loadinginstace.close();
}
reject(err)
})
})
}
// post请求
export function httpPost({url,data = {},params = {},loading}) {
if(loading){
loadinginstace = Loading.service({fullscreen: true}) // 请求打开loading
}
return new Promise((resolve, reject) => {
axios({
url:url,
method: 'post',
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
// 发送的数据
data,
// url参数
params
}).then(res => {
//关闭loading
if(loading){
loadinginstace.close();
}
resolve(res);
}).catch(res=>{
resolve(res);
//关闭loading
if(loading){
loadinginstace.close();
}
})
})
}
//请求发送文件url路径 file_list 文件列表,loading弹窗
export function httpPost_file({url,file_list,filetype,loading}){
if(loading){
loadinginstace = Loading.service({fullscreen: true}) // 请求打开loading
}
return new Promise((resolve, reject) => {
let formData = new FormData();
for (let i = 0; i <file_list.length ; i++) {
formData.append("file[]",file_list[i],file_list[i].name);
}
//文件类型
formData.append("filetype",filetype);
const config = {
headers: { "Content-Type": "multipart/form-data;boundary="+new Date().getTime() }
};
axios.post(url,formData,config)
.then(function (res) {
resolve(res);
//关闭loading
if(loading){
loadinginstace.close();
}
})
.catch(function (error) {
//关闭loading
if(loading){
loadinginstace.close();
}
reject(error);
});
})
}
export default {httpGet,httpPost,httpPost_file}
main.js 挂载它
import request from “./common/js/request”;//请求(注意自己的request文件路径)
Vue.prototype.$http = request;
来吧使用它
大概这样子,琢磨琢磨的使用