react项目中加loading效果

最新推荐文章于 2025-04-09 09:19:33 发布

Web_workstart

最新推荐文章于 2025-04-09 09:19:33 发布

阅读量4.8k

点赞数

分类专栏： react 文章标签：前端 javascript reactjs

本文链接：https://blog.csdn.net/Web_workstart/article/details/106092312

版权

react 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在React项目中添加loading效果，包括在组件挂载期间显示加载状态，使用自定义loader样式以及如何在API调用时显示和隐藏加载指示器。通过引入状态管理和生命周期方法，你可以优雅地管理加载状态，提升用户体验。

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

import { Toast } from 'antd-mobile'
// 渲染覆盖物入口
	async renderOverlays(id) {
		try {
		// 开启loading
		Toast.loading('加载中...', 0, null, false)
		const res = await axios.get(`http://localhost:8080/area/map?id=${id}`);
		// 关闭loading
		Toast.hide()
		const data = res.data.body;
		// 获取 覆盖物的 类型和缩放级别
		const { nextZoom, type } = this.getTypeAndZoom();

		data.forEach((item) => {
			// 创建覆盖物
			this.createOverlays(item, nextZoom, type);
		});
		} catch (e) {
			// 关闭loading
			Toast.hide()
		}
	}