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足矣。