在Nuxt3中使用ohmyfetch发送PUT请求时数据未更新的问题

核心问题分析 #

• 表单默认提交行为未阻止：按钮在<form>标签内，默认是submit类型，点击后会触发页面刷新，导致PUT请求可能被中断或无法正常完成。
• Ref值未正确取值：title是Vue的响应式Ref对象，直接在请求body中传入title会传递整个Ref对象，而非实际字符串值，API无法识别有效参数。
• 本地数据未同步更新：PUT请求成功后，页面展示的data仍是初始useFetch获取的旧数据，没有同步最新状态。
• 缺少错误处理：未对PUT请求的异常情况进行捕获，无法排查请求失败的具体原因。

修正后的代码 #

<template>
<div class="mt-20 mb-32 px-20 mx-auto gap-20" data-scroll-section>
  <div class="mt-20 mb-20">
      <form @submit.prevent> <!-- 阻止表单默认提交行为 -->
        <label>Enter Title</label>
        <input type="text" v-model="title"/>
        <button class="ng-bt-pri" @click="update">Send Message</button>
      </form>
      {{ title }}
  </div>                        
  {{ data }}                                     
</div>
</template>

<script setup lang="ts">
import { $fetch } from 'ohmyfetch'
import { ref } from "vue";

const title = ref("");
// 解构出refresh方法用于后续刷新数据
const { data, refresh } = await useFetch('https://api.escuelajs.co/api/v1/products/1')

const update = async () => {
  try {
    // 传递ref的实际值，使用.value获取响应式变量内容
    await $fetch("https://api.escuelajs.co/api/v1/products/1", {
      method: "put",
      body: {
        title: title.value
      }
    });
    // 请求成功后刷新本地数据，同步最新状态
    await refresh();
    // 清空输入框
    title.value = "";
  } catch (error) {
    // 捕获错误并打印，方便排查问题
    console.error("更新失败:", error);
  }
};
</script>

关键修正说明 #

1. 阻止表单默认行为：给<form>添加@submit.prevent，避免页面刷新中断请求流程。
2. 正确获取Ref值：在请求body中使用title.value传递用户输入的实际文本内容，确保API能接收有效参数。
3. 同步本地数据：利用useFetch返回的refresh方法，在PUT请求成功后重新拉取最新数据，更新页面展示内容。
4. 添加错误处理：用try/catch包裹请求逻辑，打印错误信息以便快速定位问题（如参数格式错误、API访问限制等）。

内容的提问来源于stack exchange，提问作者Cyprian Wacław