Vue 使用 Axios 发送 Payload 数据及接收响应示例

以下代码演示了如何在 Vue.js 中使用 Axios 库向服务器发送包含 payload 数据的 POST 请求，并接收和处理服务器响应：

import axios from 'axios';

const apiUrl = 'https://example.com/api';

const payload = {
  prompt: '烦烦烦',
  keys: 'sk-c6e3c04b15af4afd933f4d15282ed524'
};

axios.post(apiUrl, payload)
  .then(response => {
    console.log(response.data);
    // 在这里处理响应的 payload
  })
  .catch(error => {
    console.error(error);
    // 在这里处理错误
  });

代码解释:

导入 Axios: 首先，我们需要导入 axios 库。
定义 API 地址: 接着，定义 apiUrl 常量，存储目标 API 的地址。
创建 Payload 对象: 创建 payload 对象，包含要发送的数据。
发送 POST 请求: 使用 axios.post() 方法发送 POST 请求，将 apiUrl 和 payload 作为参数传递。
处理响应: 使用 .then() 方法处理服务器成功响应，可以通过 response.data 访问响应的 payload。
处理错误: 使用 .catch() 方法捕获并处理请求过程中可能出现的任何错误。

注意:

实际应用中，请根据服务器 API 文档定义 payload 对象的结构。
可以根据需要修改代码，例如添加请求头信息或处理不同类型的响应数据。