vue 钩子函数 使用async await

最新推荐文章于 2024-02-23 16:55:07 发布
最新推荐文章于 2024-02-23 16:55:07 发布
阅读量2.4k 收藏 3
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37339364/article/details/84328399
版权 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>vue 钩子函数 使用async await</title>
    </head>
    <body>
        <div id="app">
            <div v-for="item in list">
                {{ item }}
            </div>
        </div>

        <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    list: [1, 2, 3]
                },
                async created(){
                    // 最先输出3
                    console.log(3)
                    await setTimeout(()=>{
                        // 1输出的时间依赖于 定时间隔
                        console.log(1)
                    },100)
                    // 5的输出顺序也不是在1后面
                    console.log(5)
                },
                async mounted(){
                    // 其次输出4
                    console.log(4)
                    await setTimeout(()=>{
                        // 2输出的时间依赖于 定时间隔
                        console.log(2)
                    },100)
                    // 6的输出顺序也不是在2后面
                    console.log(6)
                }
            })
        </script>

    </body>
</html>

通过设置created和mounted中定时时间不同，查看控制台输出顺序。

完全乱套！

只能保证最先输出3 其次输出4。

await后的 5 和 6 也不是在await后输出。

结论是：所有的钩子函数都只是在指定时间执行而已，框架并不关心它们执行的结果，所以你要做的是将async和await放到真正有异步的methods的方法中。

原鑫@博客
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
created不能异步_详解vue中async-await的使用误区
weixin_39626211的博客
12-21 5411
曾经见过为了让钩子函数的异步代码可以同步执行，而对钩子函数使用async/await，就好像下面的代码：// exp-01export default {async created() {const timeKey = 'cost';console.time(timeKey);console.log('start created');this.list = await this.getList()...
vue async await
LILEILEILOVE的博客
07-04 134
async getList(){ this.loading = true; let data ={ test:'123' } try{ const res = await getListApi(data) if(parseFloat(res.code)===0){ if(res.data){ $nextTick(()=>{ this.listData = res.data; }) } }catch(e){ console.log(e) }finally{ this.loading = false }
vue中异步函数async和await的用法
wwf1225的博客
03-27 766
https://www.cnblogs.com/zhoujuan/p/11692818.html
vue中执行异步函数async和await的用法
热门推荐
小破孩的博客
12-27 1万+
在开发中，可能会遇到两个或多个函数异步执行的情况，对于Vue中函数的异步函数执行做了一个小总结，如下： 异步执行使用async和await完成 created() { this.init() }, methods: { async init(){ await this.getClassDeptInfoByDuration(); this.getList(); }, // 函数1 getList(){ return
vue中使用async函数
前端-尔嵘
11-18 6943
在Vue中使用async函数 async/await语法 在生命周期钩子上使用async函数 在methods中使用async函数 源代码 async/await语法 在ES7标准中新增了async和await关键字，作为处理异步请求的一种解决方案，实际上是一个语法糖，在ES6中已经可以用生成器语法完成同样的操作，但是async/await的出现使得用这样的方式处理异步请求更加简单和明白。 下面...
vue中mounted周期无法获取created的异步数据完美解决办法
qq_54868591的博客
11-08 5528
最近写练习项目的时候，用到了echart，官方推荐的是在mounted下进行表格配置，然而很多时候数据都是来源于异步ajax，问题来了，在这里尝试使用create下获取的异步的data数据，结果报错说undefined，这里提前在data下声明过变量名，哪怕在定义created时声明了async使用await阻塞，依旧无法获取。 查询之后发现说这个东西是，vue生命周期函数之间不会被阻塞，后一个生命周期不一定会等前一个完全执行完再执行，目前在csdn下搜到的解决方案主要有 1、在mounted下使用定时
vue3 使用async await
01-23
Vue3的生命周期钩子函数（如`setup()`）可以是异步的，因此我们可以直接在其中使用`async/await`： ```javascript import { ref } from 'vue'; async function fetchData() { const response = await fetch('...
详解vue中async-await的使用误区
10-17
在 Vue 的生命周期钩子函数中，如 `created` 和 `mounted`，使用 async/await 期望的是异步操作会阻塞后续同步代码的执行，直到异步操作完成。然而，如代码示例（exp-01）所示，这并不总是发生。`created` 钩子中的...
vue 使用async写数字动态加载效果案例
10-15
Vue组件中的mounted生命周期钩子函数可以用来初始化数据和挂载逻辑，而async函数可以保证我们的数字更新是异步的，避免阻塞页面渲染。 示例代码中，首先设置了组件的props来接收外部传入的数字内容，然后在组件的...
vue中async await使用过程
m18565890306的博客
11-29 7047
async await就是把异步的请求按同步请求，这是我在项目中用到的 我在created中：
async/await 深度理解使用
izhaong
05-25 391
在vue中使用 eg async created () { await setTimeout(()=>{ console.log(1) },5000); }, async mounted () { console.log(2) } 在vue中给created使用async await，还是会先输出2，而不是等1输出完？ 若想实现这个要...
Vue created() 里同步
u012174809的专栏
03-10 4020
假如我们在Vue的勾子函数里created放了2个回调函数 created() { this.initLinkGruopList() this.getList() }, // 第一次获取链接分类列表数据 initLinkGruopList() { this.urlmethod(this.url.linkManage.clasList_link, null) .then(res => { this.link
Vue在created异步请求数据,在mounted中获取不到
Misnice的博客
09-13 690
在created中异步请求数据，在mounted中获取不到数据。利用watch监听数据，然后再获取数据。
Vue生命周期
huotong
06-07 147
Vue的声明周期 beforeCreated beforeCreate:function(){ //组件创建之前 console.log(this) //对象已经创建了，但是还没有开始加载数据 console.log(this.msg) //undefined }, created cr...
请教vue钩子函数执行顺序问题
最新发布
jackchan9988的博客
02-23 375
然后在266行getList方法加入axiso调用如下，加上async 和 await同步等待。也就是266行的getlist方法最后才执行，请问这是啥原因？1，created前。2，created中。3，created后。4，mounted前。5，mounted中。6，mounted后。1，created前。2，created后。3，mounted前。4，mounted中。5，mounted后。6，created中。
如何用 async/await 来处理异步
想搞全栈的前端
06-23 1483
前言 ES7的async/await语法在2016年就已经提出来了，用async/ await来发送异步请求，从服务端获取数据，代码很简洁，async/await 也已经被标准化。 async 先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数： asyn...
vue-async 修饰created，created及mounted内代码执行顺序
weixin_44705310的博客
03-11 7873
vue-async 修饰created，created及mounted内代码执行顺序
vue create async await 使用
08-02
在Vue中，我们可以在组件的生命周期钩子函数中使用async/await来处理异步操作。例如，在created钩子函数中使用async/await来获取数据并进行渲染： ```javascript export default { async created() { const data ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值