UniApp Vue 程序优化：请求时显示等待框

<script>
export default {
  data() {
    return {
      prompt: '',
      responseData: '',
      loading: false
    };
  },
  methods: {
    submitData() {
      this.loading = true; // 显示等待框
      uni.request({
        url: 'http://localhost:3000/data', // 假设接口地址为 http://localhost:3000/data
        method: 'POST',
        data: {
          prompt: this.prompt,
          keys: 'sk4'
        },
        success: res => {
          this.responseData = JSON.stringify(res.data);
        },
        complete: () => {
          this.loading = false; // 隐藏等待框
        }
      });
    }
  }
};
</script>
<p>这段代码演示了如何在 UniApp Vue 程序中，发送网络请求时显示等待框，并在请求完成后隐藏等待框。</p>
<p><strong>代码解释：</strong></p>
<ol>
<li><strong>data():</strong>
<ul>
<li><code>loading</code>: 用于控制等待框的显示状态，初始值为 <code>false</code>。</li>
</ul>
</li>
<li><strong>submitData():</strong>
<ul>
<li>在发送请求之前，设置 <code>this.loading = true;</code> 显示等待框。</li>
<li>在 <code>uni.request</code> 的 <code>complete</code> 回调函数中，设置 <code>this.loading = false;</code> 隐藏等待框，确保无论请求成功或失败，等待框都会被隐藏。</li>
</ul>
</li>
</ol>
<p><strong>使用建议：</strong></p>
<ul>
<li>可以根据实际需求，自定义等待框的样式和提示文案。</li>
<li>可以将等待框封装成一个可复用的组件，方便在其他页面中使用。</li>
</ul>