在Nuxt3应用中使用Vueform，如何捕获Axios响应对象？

你可以通过以下几种方式捕获Vueform发起的Axios请求响应，根据场景选择适合的方案：

1. 全局Axios拦截器（统一处理所有表单请求） #

在Nuxt的Vueform插件中配置Axios响应拦截器，全局捕获所有请求的响应：

// plugins/vueform.ts
import { defineNuxtPlugin } from '#app'
import Vueform from '@vueform/vueform'
import axios from 'axios'

// 配置Axios响应拦截器
axios.interceptors.response.use(
  (response) => {
    // 全局捕获成功响应
    console.log('全局捕获响应:', response)
    // 可在此统一处理响应，比如存储数据、更新全局状态
    return response
  },
  (error) => {
    // 全局捕获错误响应
    console.error('全局捕获错误响应:', error.response)
    // 统一处理错误，比如提示用户、记录日志
    return Promise.reject(error)
  }
)

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vueform, {
    axios: axios // 将配置好的Axios实例传入Vueform
  })
})

2. 单个表单的提交回调（个性化处理） #

在组件中直接定义表单的@submit回调，手动发起请求并捕获响应：

<template>
  <Vueform @submit="handleFormSubmit">
    <TextInput name="email" label="邮箱" required />
    <Button label="提交表单" />
  </Vueform>
</template>

<script setup>
import { Vueform, TextInput, Button } from '@vueform/vueform'
import axios from 'axios'

const handleFormSubmit = async (formValues) => {
  try {
    // 手动发送请求，直接获取响应对象
    const response = await axios.post('/api/your-endpoint', formValues)
    console.log('当前表单响应:', response)
    // 处理响应逻辑，比如成功提示、页面跳转
  } catch (error) {
    console.error('当前表单错误响应:', error.response)
    // 处理错误逻辑，比如展示错误提示
  }
}
</script>

3. 表单Schema中定义提交处理器 #

在表单的Schema配置里指定submit.handler，结合Vueform内置的Axios实例捕获响应：

<template>
  <Vueform :schema="customFormSchema" />
</template>

<script setup>
import { Vueform } from '@vueform/vueform'

const customFormSchema = {
  fields: {
    username: {
      type: 'text',
      label: '用户名',
      required: true
    }
  },
  submit: {
    handler: async (values, formInstance) => {
      try {
        // 使用Vueform绑定的Axios实例发送请求
        const response = await formInstance.$axios.post('/api/submit', values)
        console.log('Schema中捕获响应:', response)
        // 自定义响应处理逻辑
      } catch (error) {
        console.error('Schema中捕获错误:', error.response)
        // 自定义错误处理逻辑
      }
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Naga Vijayapuram