获取数据 / nuxt#9

useFetch来获取数据

参考

useFetch
//express
res.status(200).send({
  bot: response.data.choices[0].text
})
//前端    
const url = "http://localhost:6200/test"
// const query = [{role: "user", content: data.get('prompt')}]
const prompt = "hello669"
const fetchConfig = {
  method: 'POST',
  headers: {
      'Content-Type': 'application/json'
    }
  body: {
    prompt: prompt,
    temperature: 0.3
  }
}
const { data, pending, error, refresh } = await useFetch(url, fetchConfig)
console.log(5697, data)
console.log(866, data.value.bot)
//参数：
baseURL?: string  //可以配置公共部分的url，再和url拼接
lazy?: boolean  //和pending 一起使用。为true时，先加载页面的pending，得到数据后再展示
transform?: (input: DataT) => DataT // 处理返回的数据

//如果有两个以上useFetch，得到的data会重名，可以另起名字
let { data:dataX,  error:errorX } = await getHttp('/pay/order', token.value)
另外： 直接在 setup 中使用了 `await` 后，其它函数会无法调用！！！ 可以把它包装在一个函数中，再调用一次即可。

// 错误处理 error
//express
return res.status(422).send("没有授权！")
 //url, token, body
let { data,  error } = await useFetch(url, optionX)
console.log(156, data)
console.log(244, error)

if(error.value) {
    console.log(444, error.value)
    message.error("失败！\n"+error.value.data, { duration: 5e3 })
    return
}
/* error
Object { _object: Proxy, _key: "L0VzAtqaWg", _defaultValue: undefined, __v_isRef: true }
​__v_isRef: true
​_defaultValue: undefined
​_key: "L0VzAtqaWg"
​_object: Proxy { : {…}, : {…} }
​​: Object { L0VzAtqaWg: Error }
​​​L0VzAtqaWg: Error:  (422 Unprocessable Entity (http://localhost:6200/iptest))
​​​​__nuxt_error: true
​​​​columnNumber: 5
​​​​data: "没有授权！!"
​​​​fatal: false
​​​​fileName: "undefined"
​​​​lineNumber: 100
​​​​message: " (422 Unprocessable Entity (http://localhost:6200/iptest))"
​​​​stack: 
​​​​statusCode: 422
​​​​statusMessage: "Unprocessable Entity"
​​​​unhandled: false
*/

$fetch

$fetch是与useFetch类似的封装函数，不过$fetch使用却是大大不同。
useFetch会和表格关联，造成一些不必要的http访问，$fetch则不会。
$fetch不能直接捕获到错误，只能通过 try catch。

const baseURL = "http://localhost:6200"  
const option = {
  method: "POST",
  headers: {
    'Content-Type': 'application/json'
  },
  baseURL
}
const loginApi2 = async (url, body) => {
  let obj = {
      ...option,
      body
  }
  let res
  try {
    res = await $fetch(url, obj)
    console.log(566, "login api2", res)
  } catch (error) {
    res = error
    console.log(444, "login api2 error", error)
  }
  return res
}

fetch

fetch是浏览器原生的方法，非常简洁实用。像streaming(推流)也只能用 fetch 来实现，其它方法实现不了！

//注意：一定要加headers， 否则无法传值！
const fetchConfig = {
  method: 'POST',
  headers: {
      'Content-Type': 'application/json',
  },
  body: JSON.stringify({
      prompt: prompt,
      temperature: 0.3
  })
  }
const s = await fetch(url, fetchConfig)
console.log(559, s) 
// 它得到的结果是直接传送回来的对象

useFetch的大坑

useFetch会和表格关联，在进行一次http访问后，再次在表格中每做一次输入就会发起一次http访问！！

试着加了 key, initialCache， 也未能解决！ 最后原因未知！
const option = {
  key: "hello",
  method: "POST",
  initialCache:false,
  baseURL
}

尽量用原生的 fetch()函数！

useLazyFetch

useLazyFetch 为useFetch提供了一个包装器，通过将lazy选项设置为true，在处理程序解析之前触发导航。
默认情况下，useFetch 会阻塞导航，直到它的async处理程序被解决。useLazyFetch则不会阻塞，实时渲染数据！它将有更好的用户体验。
useLazyFetch 与 useFetch 具有相同的签名。

<template>
  <div v-if="pending">
    Loading ...
  </div>
  <div v-else>
    <div v-for="post in posts">
      
    </div>
  </div>
</template>

<script setup>
/* Navigation will occur before fetching is complete.
  Handle pending and error states directly within your component's template
*/
const { pending, data: posts } = useLazyFetch('/api/posts')
watch(posts, (newPosts) => {
  // Because posts starts out null, you won't have access
  // to its contents immediately, but you can watch it.
})
</script>

一般来说，useFetch就足够使用了。但是useFetch本身有些隐性的大坑，在使用表格做提交时一定要注意，它会暗暗地多次提交！如果前端有表格提交（比如注册时），建议使用原生的方法 fetch来实现。如果要使用到服务端渲染数据，用useFetch足矣。