因为Composition组合式API setup有一点点不同特此举例几种可行的请求数据并使用方式
第一种 Promise
参考代码如下
<template>
<div>{{ min }}</div>
</template>
<script>
import { ref } from 'vue';
import { getUser } from '@/api/user'
export default {
setup(){
let min = ref("");
getUser(30).then(res=>{
min.value = res;
}).catch(err=>{
console.log(err);
})
return {
min
}
}
}
</script>
<style>
</style>
运行结果如下
这应该是影响最小的一种 基本和以前写法没什么不同
第二种 在其他声明周期中用 async await 以onMounted为例
参考代码如下
<template>
<div>{{ min }}</div>
</template>
<script>
import { ref,onMounted } from 'vue';
import { getUser } from '@/api/user'
export default {
setup(){
let min = ref("");
onMounted(async () => {
min.value = await getUser(30);
});
return {
min
}
}
}
</script>
<style>
</style>
这里 我们在onMounted的声明周期函数上设置async
在里面通过await请求
运行结果如下
也没有任何的副作用 而且看着也很规范整洁
最后一种 直接在setup上用 async await 不推荐
参考代码如下
<template>
<div>{{ min }}</div>
</template>
<script>
import { ref } from 'vue';
import { getUser } from '@/api/user'
export default {
async setup(){
let min = ref("");
min.value = await getUser(30);
return {
min
}
}
}
</script>
<style>
</style>
但你直接这样用的话 组件会加载不出来 要在调用组件的地方 外面套一对suspense
如果是路由加载的组件直接加给 router-view 就好了
<suspense>
<router-view />
</suspense>
运行结果如下
虽然也能正常加载数据 但你直接在setup上用async 会发现其他例如onMounted这些写在setup中的异步声明周期不执行了
第三种方法问题比较多 所以不推荐使用
个人建议能用第二种 尽可能写第二种 维护性会好一些