我在 React 项目中使用 axios 进行 API 调用,我想在 axios 拦截器中的 api 调用的请求和响应之间全局添加加载或旋转效果,这是我的拦截器的代码。
import Axios from 'axios'
Axios.interceptors.request.use(function (config) {
// spinning start to show
const token = window.localStorage.token;
if (token) {
config.headers.Authorization = `token ${token}`
}
return config
}, function (error) {
return Promise.reject(error);
});
Axios.interceptors.response.use(function (response) {
// spinning hide
return response;
}, function (error) {
return Promise.reject(error);
});
也许您可以采取更简单的方法,在您的应用程序忙于通过 axios 加载数据时显示全屏加载消息?
例如,您可以在代码/项目中添加以下内容,以便在 axio 请求期间在屏幕上显示全局“加载消息”:
CSS:
/* Define css class for global loading message to cover
screen during axios operations */
.loading-indicator:before {
content: '';
background: #000000cc;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
}
.loading-indicator:after {
content: 'Loading';
position: fixed;
width: 100%;
top: 50%;
left: 0;
z-index: 1001;
color:white;
text-align:center;
font-weight:bold;
font-size:1.5rem;
}
JavaScript:
Axios.interceptors.request.use(function (config) {
// spinning start to show
// UPDATE: Add this code to show global loading indicator
document.body.classList.add('loading-indicator');
const token = window.localStorage.token;
if (token) {
config.headers.Authorization = `token ${token}`
}
return config
}, function (error) {
return Promise.reject(error);
});
Axios.interceptors.response.use(function (response) {
// spinning hide
// UPDATE: Add this code to hide global loading indicator
document.body.classList.remove('loading-indicator');
return response;
}, function (error) {
return Promise.reject(error);
});
使用这种方法,您甚至可以使用 CSS3 动画将“正在加载”消息替换为动画旋转器或类似的东西 - 希望这会有所帮助!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)