uniapp接口调用添加loading

### 实现 UniApp 接口调用时的 Loading 效果 在 UniApp 中实现 API 请求时显示加载动画可以通过 `uni.showLoading` 和 `uni.hideLoading` 方法来控制加载状态。为了确保用户体验良好，可以在发起请求之前展示加载提示框，并在网络请求完成后立即隐藏它。 #### 封装带有 Loading 的 API 请求函数 通过创建一个通用的方法来处理所有的网络请求，这样不仅可以简化代码逻辑，还可以统一管理错误处理和加载指示器的行为： ```javascript // 定义封装后的API请求工具类 const requestUtil = { async fetch(url, method = 'GET', data = {}) { try { uni.showLoading({ title: "加载中..." }); // 显示加载图标 [^1] const response = await new Promise((resolve, reject) => { uni.request({ url, method, data, success(res) { resolve(res); }, fail(err) { reject(err); } }); }); return response; } catch (error) { console.error('Request failed:', error); throw error; // 抛出异常以便外部捕获并处理 } finally { setTimeout(() => { uni.hideLoading(); // 不论成功与否都应关闭加载图标 [^3] }, 500); // 延迟半秒以模拟实际场景中的延迟感 } } }; ``` 此段代码展示了如何定义一个名为 `fetch` 的异步函数用于执行 HTTP 请求操作。该函数接受三个参数：URL 地址、HTTP 动词以及要传递给服务器的数据对象。当调用这个方法时会自动显示出等待对话框直到获取到响应为止；如果发生任何问题，则会在日志里记录下来并将错误抛回给调用者继续处理。 #### 使用封装好的 API 工具类发起请求 一旦有了上述封装过的工具类之后，在页面或者其他组件内就可以很方便地使用这些功能了: ```javascript export default { onLoad() { this.getData(); }, methods: { getData() { requestUtil.fetch('/api/data') .then(response => { console.log('Data received:', response.data); }) .catch(error => { console.warn('Failed to get data:', error.message || 'Unknown Error'); }); } } } ``` 这里假设有一个 Vue 组件实例化了一个生命周期钩子 `onLoad()` 来触发数据拉取动作。在这个例子里面，每当页面被加载的时候就会尝试从指定 URL 获取资源列表，并且在整个过程中都会伴随着友好的视觉反馈告知用户当前正处于忙碌状态下。