注:项目基于Element-plus && Js
首先我们的项目需求是前端在每次获取数据的时候都要loading一下,避免用户在使用的时候触发其他操作(可以理解为锁屏);
思路:通过 axios 提供的请求拦截和响应拦截的接口,这样全局的只要发起请求就会loading;
问题:比如编辑操作会先请求一次接口再刷新一次页面,发起两次请求,这个请参考防抖,目前项目这个问题并未出现
/*
* @Author: your name
* @Date: 2022-05-05 14:49:02
* @LastEditTime: 2022-06-13 10:27:59
* @LastEditors: 1003178 958152
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \client\src\request\index.ts
*/
import axios, { AxiosRequestConfig } from 'axios'
import { ShowError } from '../utils/index'
// 引入进度条的js
import NProgress from 'nprogress'
// 引入 进度条的css
import 'nprogress/nprogress.css'
import Phonpa from "phonpa";
import { ElMessage,ElLoading } from 'element-plus';
axios.defaults.baseURL = process.env.VUE_APP_BaseURL
// //loading对象
let loading:any;
const service = axios.create({
timeout: 60000,
withCredentials: true,
headers: {
'Content-Type': 'application/json'
}
})
//显示loading
function showLoading(target:any) {
loading = ElLoading.service({
lock: true,
text: "Loading...",
background: 'rgba(0, 0, 0, 0.7)',
target: target || "body"
});
}
//隐藏loading
function hideLoading() {
loading.close();
}
// 添加请求拦截器
service.interceptors.request.use(
function (config) {
showLoading("")
NProgress.start()
return config
},
function (error) {
NProgress.done()
return Promise.reject(error)
}
)
// 添加响应拦截器
service.interceptors.response.use(
function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
// dataAxios 是 axios 返回数据中的 data
setTimeout(()=>{
hideLoading()
},300)
const dataAxios = response.data
// eslint-disable-next-line eqeqeq
NProgress.done()
if (dataAxios.Code !== 1) {
ShowError(dataAxios.Message)
}
return dataAxios
},
function (error) {
setTimeout(()=>{
hideLoading()
},300)
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
// ShowError(error)
if(error.response) {
const statusCode = error.response.status;
if(statusCode === 401) {
ElMessage({
message: '鉴权错误,请重新登陆',
grouping: true,
type: 'error',
})
} else {
ShowError(error)
}
}
NProgress.done()
return Promise.reject(error)
}
)
// export default service
export default function(config: AxiosRequestConfig){
var user_info = Phonpa.phonpa_api.get_user_info();
let OrgId = localStorage.getItem('orgId');
let OrgHouse:string = localStorage.getItem('OrgHouse') ?? "";
var token = "";
if(user_info != null && user_info != undefined){
try {
token = user_info["access_token"];
} catch (error) {
}
}
config.headers = {
'Content-Type': 'application/json',
"Authorization": "Bearer " + token,
"OrgId" : "" + OrgId,
"OrgHouse":encodeURIComponent(OrgHouse)
};
return service(config);
}