vue.js - 处理 nuxt3 usefetch 上的错误

Question

我只是不知道如何处理这里的错误:

const { error, data } = useFetch('https://example.app/api/contact', {
   method: "POST",
   headers: { "Content-Type": "application/json" },
   body: {
      name: form.name.value,
      email: form.email.value,
      message: form.message.value
   }
});
console.log(error.value, error)

在错误本身上，它返回带有 _error 的 ref，其中包含有错误的对象。但是无论如何我都无法解决这些错误..

Answer 1

引用:https://v3.nuxtjs.org/api/composables/use-fetchuseFetch返回值{data, pending, error, refresh}，这里是一个例子。

const { data, pending, error, refresh } = await useFetch(
  'https://api.nuxtjs.dev/mountains',
  {
    pick: ['title']
  }
)

顺便说一句，useFetch 返回一个Promise，在你的例子中，你可以做如下。

useFetch('https://example.app/api/contact', {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: {
    name: form.name.value,
    email: form.email.value,
    message: form.message.value
  }
}).then(res => {
  const data = res.data.value
  const error = res.error.value
  if (error) {
    // dealing error
    console.log(error)
  } else {
    console.log(data)
  }
}, error => {
  console.log('exception...')
  console.log(error)
})