UniApp实战教程：使用uni.showLoading优化网络请求体验

在开发UniApp应用时，经常需要进行网络请求来获取数据。为了提升用户体验，在请求过程中显示一个等待框是非常必要的。本文将介绍如何使用UniApp提供的 uni.showLoading 和 uni.hideLoading 方法来实现这一功能。

示例代码

<template>
  <view>
    <input v-model='prompt' placeholder='请输入...' />
    <button @click='submitData'>提交</button>
    <view v-if='loading'>加载中...</view>
    <view>{{ responseData }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      prompt: '',
      responseData: '',
      loading: false
    };
  },
  methods: {
    submitData() {
      uni.showLoading({
        title: '正在加载中...'
      }); 
      this.loading = true;
      uni.request({
        url: 'https://svip1-api.cveoy.top/v3/completions', 
        method: 'POST',
        data: {
          prompt: this.prompt,
          keys: 'sk-c6e3c04b15af4afd933f4d15282ed524'
        },
        success: res => {
          this.responseData = JSON.stringify(res.data);
        },
        complete: () => {
          this.loading = false;
          uni.hideLoading(); 
        }
      });
    }
  }
};
</script>

代码解析

uni.showLoading(OBJECT): 在请求开始之前，调用 uni.showLoading() 方法显示一个等待框。你可以通过 OBJECT 参数自定义等待框的样式和内容，例如：
```
uni.showLoading({
  title: '加载中...', // 提示文字
  mask: true // 是否显示遮罩层
});
```
uni.hideLoading(): 在请求完成后，无论成功或失败，都要调用 uni.hideLoading() 方法隐藏等待框。
loading 状态: 在 data 中定义了一个 loading 变量，用于控制等待框的显示和隐藏。
complete 回调: 在 uni.request 的 complete 回调函数中，无论请求成功与否，都会将 loading 设置为 false 并隐藏等待框，确保等待框在请求结束后被及时关闭。

总结

通过使用 uni.showLoading 和 uni.hideLoading 方法，我们可以轻松地在UniApp中实现网络请求等待框的功能，提升用户体验。同时，我们还可以根据实际需求自定义等待框的样式和内容。