UniApp 数据交互：使用 Payload 发送和接收数据

本教程将演示如何在 UniApp 中使用 Payload 发送和接收数据，并更新前端界面。

1. 提交数据的例程

以下代码展示了如何构建 Payload 并使用 uni.request 发送 POST 请求：

// 构造请求参数
let payload = {
  'prompt': '烦烦烦',
  'keys': 'sk-c6e3c04b15af4afd933f4d15282ed524'
};

// 发送请求
uni.request({
  'url': 'https://example.com/api',
  'method': 'POST',
  'data': payload,
  'success': function (res) {
    console.log(res.data);
    // 处理响应数据
  },
  'fail': function (res) {
    console.log(res);
    // 处理错误
  }
});

代码解析:

构造 Payload: 创建一个 JavaScript 对象 payload，包含要发送的数据。
发送请求: 使用 uni.request 发送 POST 请求，将 payload 作为 data 属性的值传递。
处理响应: 在 success 回调函数中处理服务器返回的数据，在 fail 回调函数中处理请求失败的情况。

2. 接收响应 Payload 并更新前端界面

以下代码展示了如何在 UniApp 组件中接收响应 Payload 并更新前端界面：

<template>
  <view>
    <text>{{ responseData }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      'responseData': ''
    };
  },
  methods: {
    fetchData() {
      // 构造请求参数
      let payload = {
        'prompt': '烦烦烦',
        'keys': 'sk-c6e3c04b15af4afd933f4d15282ed524'
      };

      // 发送请求
      uni.request({
        'url': 'https://example.com/api',
        'method': 'POST',
        'data': payload,
        'success': (res) => {
          console.log(res.data);
          // 更新响应数据
          this.responseData = res.data;
        },
        'fail': (res) => {
          console.log(res);
          // 处理错误
        }
      });
    }
  },
  mounted() {
    // 在组件挂载后立即发送请求
    this.fetchData();
  }
};
</script>

代码解析:

数据绑定: 使用 {{ responseData }} 将 responseData 数据绑定到视图层。
发送请求: 在 fetchData 方法中发送请求，并在 success 回调函数中更新 responseData 的值。
组件挂载: 在 mounted 生命周期函数中调用 fetchData 方法，确保组件挂载后立即发送请求。

通过以上步骤，您就可以在 UniApp 中使用 Payload 进行数据交互，并实时更新前端界面了。