axios 中使用 element-ui loading

最新推荐文章于 2025-06-19 11:41:35 发布

只会切图的前端

最新推荐文章于 2025-06-19 11:41:35 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web移动端文章标签： axios loading element-ui vue

本文链接：https://blog.youkuaiyun.com/qq_41786458/article/details/83009851

web移动端专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在项目中集成Axios和Element-UI，实现带加载效果的HTTP请求。通过创建Axios实例并设置超时时间，利用Element-UI的Loading组件增强用户体验。同时，文章详细展示了请求和响应拦截器的配置，确保请求过程中显示加载提示，并在响应后及时关闭。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、引入
import axios from ‘axios’
import ‘element-ui/lib/theme-chalk/index.css’;
import { Loading } from ‘element-ui’;

2、使用

const service = axios.create({
    timeout: 5000 
})

let loadingInstance;

// 添加请求拦截器
service.interceptors.request.use(function (config) {// 在发送请求之前做些什么
	     loadingInstance  = Loading.service({ //加载loading
				fullscreen: true, 
				text: 'Loading',
	            spinner: 'el-icon-loading',
	            background: 'rgba(0, 0, 0, 0.7)' 
	      });
        return config;
  }, function (error) {// 对请求错误做些什么
         return Promise.reject(error);
  });

// 添加响应拦截器
service.interceptors.response.use(function (response) {// 对响应数据做点什么
            loadingInstance.close();//关闭loading
		   if(response.data.code=="200"){
				  return response.data.data;
			}else{
				  return Promise.reject(response.data);
			}
  }, function (error) {// 对响应错误做点什么
         return Promise.reject(error);
  });
  
export default service