关于vue项目中，在异步请求返回的数据赋值给全局变量的问题

最新推荐文章于 2025-02-11 17:49:40 发布

原创最新推荐文章于 2025-02-11 17:49:40 发布 · 6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #ajax

本文解析了一个关于Vue或JavaScript中全局变量在组件生命周期钩子中异步更新的问题。初始值total1为1，通过封装的请求方法获取数据后赋值为8，但在created和mounted阶段打印的total1始终为1，原因在于异步回调执行顺序。最终揭示了在页面加载完成后total1才正确显示为8。

1、在页面data中声明全局变量total1并赋值为1

2、在封装的请求方法中将返回的数据值赋值给全局变量total1。(res.totalrecords的值为8)

3、在created()中调用请求方法

4、在mounted()中打印全局变量total1。理论上此时total1的值应该为8，但此时打印出的值为1

已解决：不管是created还是mounted中调用的含有请求方法的函数都是异步的。而这里的console.log（this.total1）是属于同步任务，所有的异步任务需要等待所有同步任务执行完才会执行。所以实际上console.log(this.total1)是先于this.getImgList()执行，此时的total1的值为1。但是在页面完全生成时total的值自然是调用this.getImgList()后的值8。