axios显示加载动画
时间: 2023-12-15 17:32:58 浏览: 36
axios可以通过拦截器来实现显示加载动画的效果。以下是一个示例代码:
```javascript
import axios from 'axios';
import { Loading } from 'element-ui';
let loadingInstance = null;
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
});
// request拦截器
service.interceptors.request.use(config => {
// 在请求发送之前显示loading
loadingInstance = Loading.service({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.6)'
});
return config;
}, error => {
// 请求错误时关闭loading
loadingInstance.close();
Promise.reject(error);
});
// response拦截器
service.interceptors.response.use(response => {
// 请求成功时关闭loading
loadingInstance.close();
return response.data;
}, error => {
// 请求错误时关闭loading
loadingInstance.close();
return Promise.reject(error);
});
export default service;
```
在这个示例中,我们使用了element-ui的Loading组件来实现loading动画的效果。在请求发送之前,我们创建了一个loading实例,并在请求成功或失败时关闭loading实例。这样就可以实现axios显示加载动画的效果了。