Vue.js 使用 Axios 提交 Payload 数据及接收响应

本教程将演示如何使用 Vue.js 和 Axios 库构建一个简单的表单，该表单可以将数据作为 payload 提交到服务器，并接收服务器返回的响应。

代码示例

以下是完整的 Vue.js 代码示例：

<template>
  <div>
    <h1>提交数据</h1>
    <form @submit.prevent='submitData'>
      <label>
        提示信息：
        <input v-model='prompt' type='text' required>
      </label>
      <br>
      <label>
        密钥：
        <input v-model='keys' type='text' required>
      </label>
      <br>
      <button type='submit'>提交</button>
    </form>
    <h1>响应数据</h1>
    <pre>{{ response }}</pre>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      prompt: '',
      keys: '',
      response: null
    }
  },
  methods: {
    async submitData() {
      try {
        const payload = {
          prompt: this.prompt,
          keys: this.keys
        }
        const response = await axios.post('/api/submit', payload)
        this.response = response.data
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

代码解释

模板部分:
- 我们定义了一个包含两个输入框（提示信息和密钥）和一个提交按钮的表单。
- v-model 指令用于双向绑定表单输入值和组件数据。
- @submit.prevent 指令用于阻止表单默认提交行为，并调用 submitData 方法。
- response 数据将显示在 <h1> 标签下方。
JavaScript 部分:
- 我们引入了 axios 库来处理 HTTP 请求。
- data 函数返回组件数据，包括 prompt、keys 和 response。
- submitData 方法使用 async/await 语法异步地向服务器发送 POST 请求：
  - 首先，构建包含 prompt 和 keys 数据的 payload 对象。
  - 然后，使用 axios.post 方法发送 POST 请求到 '/api/submit' 路径，并将 payload 作为请求数据。
  - 如果请求成功，我们将服务器返回的响应数据存储在 response 变量中，并更新组件的 response 数据。
  - 如果请求失败，我们将错误信息打印到控制台。

总结

本教程介绍了如何使用 Vue.js 和 Axios 构建一个简单的表单，该表单可以将数据作为 payload 提交到服务器，并接收服务器返回的响应。您可以根据自己的需求修改和扩展此代码示例，构建更复杂的应用程序。