处理 nuxt3 usefetch 上的错误

Question

I just cant figure out how to handle errors here:

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)

On error itself it returns ref with _error that contains object with errors. However I cannot get to those errors anyhow..

Answer 1

ref: https://v3.nuxtjs.org/api/composables/use-fetch useFetch return values {data, pending, error, refresh}, here is an example.

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

BTW，useFetch return a Promise , in your example, you can do as follows.

 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) })

Answer 2

Ok, here is a practical solution, you can do the console log after checking error, like this:

if (error.value) {
  console.log(error.value)
  throw createError({statusCode: 404, statusMessage: "Page 
 not found.", fatal: true})     
 } 

You do not get error out, why console.log fails, you need to get the value after the error is trigged.