axios 全局加载弹窗

赵智沉

于 2024-06-29 02:40:43 发布

阅读量105

点赞数

Axios 全局加载弹窗

在前端开发中，经常会遇到需要向后端发送 HTTP 请求获取数据的情况。而 Axios 是一个流行的基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 的 AJAX 请求。在实际开发中，我们经常需要为请求添加全局加载弹窗，以提升用户体验。

为什么需要全局加载弹窗？

当用户触发某个操作，需要向后端请求数据时，可能会出现网络延迟或者响应时间较长的情况。为了让用户知道数据正在加载中，我们通常会添加一个加载动画或者弹窗来提示用户。这样可以避免用户在等待过程中感到焦虑或者不知所措。

如何使用 Axios 添加全局加载弹窗？

我们可以通过 Axios 的拦截器来实现全局加载弹窗的效果。下面是一个简单的例子：

// main.js

import axios from 'axios';
import { Loading } from 'element-ui';

let loadingInstance = null;

axios.interceptors.request.use(config => {
  loadingInstance = Loading.service({ fullscreen: true });
  return config;
}, error => {
  loadingInstance.close();
  return Promise.reject(error);
});

axios.interceptors.response.use(response => {
  loadingInstance.close();
  return response;
}, error => {
  loadingInstance.close();
  return Promise.reject(error);
});