vue3在setup中请求数据并使用的几种方式

news2024/11/20 9:35:00

因为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中的异步声明周期不执行了
第三种方法问题比较多 所以不推荐使用

个人建议能用第二种 尽可能写第二种 维护性会好一些

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/562468.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

应急响应之内存分析方法

应急响应之内存分析方法 1.内存的获取基于内核模式程序的内存获取基于系统崩溃转储的内存获取基于虚拟化快照的内存获取dumpit获取(推荐)2.内存的分析RedlineVolatility1.内存的获取 基于内核模式程序的内存获取 这种获取方法一般需要借助相关的工具来完成。常用的提取工具…

leetcode 2542. Maximum Subsequence Score(最大子串分数)

2个数组&#xff0c;长度一样&#xff0c;从中选k个下标&#xff08;两个数组用同样的下标&#xff09;&#xff0c; 会得到k个nums1中的数字&#xff0c;和k个nums2中的数字。 score k个nums1的数字之和 ✖ min(k个nums2的数字&#xff09;&#xff0c; 找到最大的score。 思…

【Qt】QLocalSocket与QLocalServer问题:接收不到数据、只能收到第一条、数据不完整解决方案【2023.05.24】

简介 Qt很强大,但是Qt的帮助文档、API属实是让我们走不少弯路。QLocalSocket一个很简单的东西,我仅想用来实现一个简单的本地进程通信,就遇到了:客户端循环发送数据,服务端只能接收到一条、接收到数据不完整等奇奇怪怪的现象。 最郁闷的是,网上很多教程说的都是错的😒。…

Web服务器实现|基于阻塞队列线程池的Http服务器|线程控制|Http协议

基于阻塞队列生产者消费者模型线程池的多线程Web服务器 代码地址&#xff1a;WebServer_GitHub_Addr README 摘要 本实验通过C语言&#xff0c;实现了一个基于阻塞队列线程池的多线程Web服务器。该服务器支持通过http协议发送报文&#xff0c;跨主机抓取服务器上特定资源。与…

火山引擎数智平台VeDI助力某办公软件企业营销线索转化提升14%

一条营销线索&#xff0c;从官网后台下载到完成成交&#xff0c;到底需要经历哪些环节&#xff1f; 在企业级市场的销售场景中&#xff0c;营销线索通常是指用户通过相关产品的官方网站或者营销活动界面&#xff0c;主动留下的联系方式&#xff1b;而根据线索价值的不同&#…

2023京东618全民拆快递互动活动玩法规则!

2023京东618全民拆快递&#xff0c;瓜分20亿活动规则&#xff01; 618无门槛红包29号开领&#xff01; ​手机京东搜索&#xff1a;好运红包210&#xff0c;领最高20618&#xff0c;每天可领三次&#xff01; ​手机京东搜索&#xff1a;能省就省50&#xff0c;领最高23888…

深度学习进阶篇-预训练模型[1]:预训练分词Subword、ELMo、Transformer模型原理;结构;技巧以及应用详解

【深度学习入门到进阶】必看系列&#xff0c;含激活函数、优化策略、损失函数、模型调优、归一化算法、卷积模型、序列模型、预训练模型、对抗神经网络等 专栏详细介绍&#xff1a;【深度学习入门到进阶】必看系列&#xff0c;含激活函数、优化策略、损失函数、模型调优、归一化…

算法设计与分析期末总结

前言&#xff1a;基本是为了我自己看的一些我容易忘记的东西&#xff0c;为考试作准备把&#xff0c;主要使后半部分的知识&#xff0c;前半部分请看算法设计与分析阶段考总结 第五章 回溯算法是一种系统地搜索问题的解的方法。某个问题的所有可能解的称为问题的解空间&#xf…

百度工程师移动开发避坑指南——Swift语言篇

作者 | 启明星小组 上一篇我们介绍了移动开发常见的内存泄漏问题&#xff0c;见《百度工程师移动开发避坑指南——内存泄漏篇》。本篇我们将介绍Swift语言部分常见问题。 对于Swift开发者&#xff0c;Swift较于OC一个很大的不同就是引入了可选类型&#xff08;Optional&#…

Install Redis Cluster(1master-2slave) on Kubernetes

目录 Node & Software & Docker Images Lists Prerequisites Architecture Setting up your Redis cluster Creating Namespace Creating StorageClass Creating Persistent volumes Creating ConfigMap Creating StatefulSet Creating Headless Service …

中创|警惕AI骗局,10分钟被骗430万,AI诈骗正在全国爆发!

眼见为实&#xff1f;耳听为真&#xff1f;当心AI诈骗&#xff01; 只需要提供一张带脸的照片&#xff0c;就可以把自己置换成视频、电视剧中的男&#xff08;女&#xff09;主角&#xff0c;拟真度非常高&#xff0c;毫无违和感&#xff0c;这是最近爆火的AI换脸。 然而随着人…

浏览器数据存储方式

浏览器数据存储方式 常用的前端数据存储方法笼统来说有 3 种&#xff1a; local/session storagecookiesindexeddb 3 种方法各有各的优点和使用范围。 local/session storage local/session storage 保存的格式都为键值对&#xff0c;并且用法都是差不多&#xff0c;如下&…

如何选择高品质SPD浪涌保护器

了解了SPD的原理和技术参数和选型方法&#xff0c;但是面对市场上形形色色的SPD品牌&#xff0c;相差无几的参数&#xff0c;该如何去筛选高品质的SPD呢&#xff1f; 作为一个SPD开发人员&#xff0c;谈一下我的看法。前面提到&#xff0c;选择SPD时&#xff0c;有几个重要的参…

探索 Python Web 后端技术的发展之路

导语 Python 在 Web 后端开发领域中有着广泛的应用&#xff0c;它简洁的语法和强大的功能使得开发者们青睐有加。本文将更深入地探讨 Python Web 后端技术的发展趋势和路线&#xff0c;以及相关技术如何影响了 Web 开发的未来。 一、Python Web 框架的演变 Flask&#xff1a…

软件设计师 软件工程

** 判定覆盖 设置判定用例来保障真和假的结果都可以取到** 满足条件覆盖问题问需要多少个测试 ** 其实有技巧的&#xff08;就看最后面的 分支&#xff09;** **沟通路径&#xff1a;&#xff08;n-1&#xff09;n再/2 和主程序沟通那就是n-1条 ** ******************* 做题技…

HTTPS行为大赏(三分钟了解加密过程)

文章目录 前言1.没有加密的时候2.对称密钥加密传输3.非对称加密4.引入数字证书&#xff08;对称加密非对称加密&#xff09; 前言 既然要对HTTPS进行解读&#xff0c;我们首先了解&#xff0c;HTTPS是什么&#xff1f;HTTPS就相当于HTTPSSL/TLS这样的组合&#xff0c;HTTP&…

软考 软件设计师计算机网络笔记

网络设备 物理层的互联设备有中继器和集线器&#xff0c;集线器是一种特殊的多路多端口中继器 数据链路层的互连设备有网桥&#xff0c;交换机&#xff0c;交换机是一个多端口的网桥 网络层互连设备有路由器 协议簇 所有带T的除了TFTP其他都是TCP&#xff0c;所有不带T的除…

BFT 最前线 | ChatGPT登顶App Store;国产中文大语言模型「天河天元」发布;华为招募天才少年;阿里分拆上市

原创 | 文 BFT机器人 AI视界 TECHNOLOGY NEWS 01 ChatGPT上架App Store登顶榜首 OpenAI&#xff1a;很快也将出现在安卓上 近日&#xff0c;ChatGPT正式发布App版本&#xff0c;上架APP Store&#xff0c;支持iPhone和iPad设备。OpenAI表示&#xff0c;ChatGPT iOS APP可免费…

两阶段鲁棒优化及列与约束生成算法(CCG)的基本原理(超详细讲解,附matlab代码)

本文的主要参考文献&#xff1a; Zeng B , Zhao L . Solving Two-stage Robust Optimization Problems by A Constraint-and-Column Generation Method[J]. Operations Research Letters, 2013, 41(5):457-461. 1.两阶段鲁棒优化问题的引入 鲁棒优化是应对数据不确定性的一种优…

探索【Stable-Diffusion WEBUI】的图片超分辨插件:StableSR

文章目录 &#xff08;零&#xff09;前言&#xff08;一&#xff09;图片放大&#xff08;二&#xff09;图片超分辨率放大脚本插件&#xff08;StableSR&#xff09;&#xff08;2.1&#xff09;下载组件&#xff08;2.2&#xff09;使用&#xff08;2.3&#xff09;实例对比…