配置axios , 创建axios.js
import axios from "axios";
import qs from "qs";
import { ElMessage} from 'element-plus';
import { useUserStore, usePinia } from "@/stores";
const userStore = useUserStore(usePinia); //必须这么调用 因为页面刷新会走这个,如果用const userStore = useUserStore()则会报错,因为页面渲染顺序问题
const service = axios.create({
baseURL: "/api",
timeout: 5000,
withCredentials: true,
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
}
});
// 刷新 access_token 的接口
const refreshToken = () => {
return instance.post(
"/login/automaticRenewalAccount",
{ token: userStore.getToken() },
true
);
};
service.interceptors.request.use(
(config) => {
if (config.method === "post") {
let curPost = config.url.split("/")[config.url.split("/").length - 1];
if (curPost === "uploadpicture" || curPost === "fileUpload") {
return config; // 这里对上传文件/图片的 api 不做传参序列化处理
} else {
config.data = qs.stringify(config.data);
return config;
}
}
return config;
},
(error) => {
return Promise.reject();
}
);
service.interceptors.response.use(response => {
//接收到响应数据并成功后的一些共有的处理,关闭loading等
if (response.status === 200) {
return response.data;
} else {
console.log(response);
Promise.reject();
}
}, error => {
/***** 接收到异常响应的处理开始 *****/
if (error && error.response) {
// 1.公共错误处理
// 2.根据响应码具体处理
switch (error.response.status) {
case 400:
ElMessage.error('错误请求')
break;
case 401:
const { config } = error;
//刷新token
if (!isRefreshing) {
isRefreshing = true;
return refreshToken()
.then((res) => {
userStore.setToken(res.data.data);
//localStorage.setItem("token", token);
config.headers.Authorization = `Bearer ${res.data.data}`;
// token 刷新后将数组的方法重新执行
requests.forEach((cb) => cb(res.data.data));
requests = []; // 重新请求完清空
return instance(config);
})
.catch((err) => {
console.log("抱歉,您的登录状态已失效,请重新登录!");
return Promise.reject(err);
})
.finally(() => {
isRefreshing = false;
});
} else {
// 返回未执行 resolve 的 Promise
return new Promise((resolve) => {
// 用函数形式将 resolve 存入,等待刷新后再执行
requests.push((token) => {
config.headers.Authorization = `Bearer ${token}`;
resolve(instance(config));
});
});
}
//Message.error = '未授权,请重新登录'
break;
case 403:
ElMessage.error('拒绝访问')
break;
case 404:
ElMessage.error('请求错误,未找到该资源')
break;
case 405:
ElMessage.error('请求方法未允许')
break;
case 408:
ElMessage.error('请求超时')
break;
case 500:
ElMessage.error('服务器端出错')
break;
case 501:
ElMessage.error('网络未实现')
break;
case 502:
ElMessage.error('网络错误')
break;
case 503:
ElMessage.error('服务不可用')
break;
case 504:
ElMessage.error('网络超时')
break;
case 505:
ElMessage.error('http版本不支持该请求')
break;
default:
ElMessage.error(`连接错误${error.response.status}`)
}
} else {
// 超时处理
if (qs.stringify(error).includes('timeout')) {
ElMessage.error('服务器响应超时,请刷新当前页')
}
ElMessage.error('连接服务器失败')
}
//Message.error(error.message)
/***** 处理结束 *****/
//如果不需要错误处理,以上的处理过程都可省略
return Promise.resolve(error.response)
})
export default service;
三、调用接口request.js
import http from "../utils/axios";
export const areaOrgFind = data => {
return http({
url: "/areaOrg/find",//接口
method: "post",
data: data
});
};
export const areaOrgFind = id=> {
return http({
url: "/areaOrg/find",//接口
method: "get",
params: {
compId: Id
},
});
};
四、页面调用
<template>
<div>
<div class="container">
</div>
</div>
</template>
<script>
import { areaOrgFind } from '@/api/login'
export default {
data() {
return {
uuid: ""
}
},
mounted() {
this.areaOrgFinds()
},
methods: {
async areaOrgFinds() {
areaOrgFind(this.uuid)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
}); }
}
}
</script>