Vue中的同步和异步调用顺序详解

目录
  • Vue的同步和异步调用顺序
    • 例如
  • Vue两个异步方法顺序执行
    • 第一个异步方法
    • 第二个异步方法

Vue的同步和异步调用顺序

Vue中的方法调用顺序是依次进行的，方法体内部也是依次执行的，但是，两个方法体的执行顺序并不能严格控制。

以下方法中都带有promise函数或异步调用。

    initUserData() {
      this.getPsCountryList() // 1 获取国家列表stateOptions，方法内同步
      this.getTimeZone() // 2 获取时区timezones，方法内同步
      this.getUserInfo() // 3 获取用户信息
    }

在实际运行中，三个方法的执行顺序是1-2-3，但是方法3始终不能获取到stateOptions和timezones

背后的调用顺序是1-2-3，但是，方法的执行时间并没有严格控制。

如果想要做到方法调用和执行是同步的，可以使用async和await修饰符。

例如

    async initUserData() {
      await this.getPsCountryList() // 1 获取国家列表stateOptions，方法内同步
      await this.getTimeZone() // 2 获取时区timezones，方法内同步
      await this.getUserInfo() // 3 获取用户信息
    }

Vue两个异步方法顺序执行

需求：两个异步函数按顺序执行，首先获取第一个异步函数的返回的值，接着在第二个异步函数里面调用

方法：先在第一个异步函数里返回一个promise，接着用async和await调用它

第一个异步方法

getAllNotice() {
                let data = {
                    "searchParams": [{
                        "fieldName": "equipmentId",
                        "operate": "eq",
                        "value": "000000"
                    }],
                    "size": -1
                }
                return new Promise((resolve) => {
                    API.getNotice(data).then(res => {
                        console.log(res)
                        if (res.data.code == "200") {
                            this.noticeList = res.data.data.list
                            console.log(this.noticeList)
                            resolve();
                            return
                        } else {
                            uni.showToast({
                                title: res.data.message,
                                duration: 1000,
                                icon: "none"
                            })
                        }
                    })
                })                
            },

第二个异步方法

//获得当前的公告列表
            getNowNotice(){
                //获取当前时间戳
                var timestamp = (new Date()).getTime();
                var _this = this
                console.log(timestamp);
                //将noticeList的结束时间转换成时间戳
                for(var i=0; i<this.noticeList.length; i++){
                    var endTimeStamp = TIME.TimeToTimeStamp(this.noticeList[i].endTime)
                    console.log(endTimeStamp)
                    if(endTimeStamp>timestamp){
                        _this.noticeNewList.push(this.noticeList[i])
                    }
                }
                console.log("noticeNewList",_this.noticeNewList)
            }

用async和await

async onLoad(option) {
            await this.getAllNotice()
            await this.getNowNotice()
        },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue同步父子组件和异步父子组件的生命周期顺序问题

    关于vue组件的引入方式有两种 一. 同步引入 例子: import Page from '@/components/page' 二.异步引入 例子:const Page = () => import('@/components/page') 或者: const Page = resolve => require(['@/components/page'], page) 两种引入方式的不同之处在于: 同步引入时生命周期顺序为:父组件的beforeMount.created.beforeMoun

  • Vue 同步异步存值取值实现案例

    1.vue中各个组件之间传值 1.父子组件 父组件–>子组件,通过子组件的自定义属性:props 子组件–>父组件,通过自定义事件:this.emit(′事件名′,参数1,参数2,...); 2.非父子组件或父子组件通过数据总数Bus,this.root.$emit('事件名',参数1,参数2,-) 3.非父子组件或父子组件 更好的方式是在vue中使用vuex 方法1: 用组件之间通讯.这样写很麻烦,并且写着写着,估计自己都不知道这是啥了,很容易写晕. 方法2: 我们定义全局变量.模块a的数据

  • Vue中的同步调用和异步调用方式

    Vue中的同步调用和异步调用方式

    目录 Vue的同步调用和异步调用 Promise实现异步调用 async /await方法实现同步调用 Vue同步和异步的问题 基本语法 实例 Vue的同步调用和异步调用 Promise实现异步调用 异步调用,增加a.b两个方法,并在mounted中调用. 观察客户端,并没有按照方法执行的顺序输出,使用Promise实现了异步调用. 观察客户端,并没有按照方法执行的顺序输出,使用Promise实现了异步调用. async /await方法实现同步调用 使用async 和 await配合promi

  • Vue中的同步和异步调用顺序详解

    目录 Vue的同步和异步调用顺序 例如 Vue两个异步方法顺序执行 第一个异步方法 第二个异步方法 Vue的同步和异步调用顺序 Vue中的方法调用顺序是依次进行的,方法体内部也是依次执行的,但是,两个方法体的执行顺序并不能严格控制. 以下方法中都带有promise函数或异步调用.     initUserData() {       this.getPsCountryList() // 1 获取国家列表stateOptions,方法内同步       this.getTimeZone() //

  • C++中构造函数与析构函数的调用顺序详解

    前言 在使用构造函数和析构函数时,需要特别注意对它们的调用时间和调用顺序.在一般情况下,调用析构函数的次序正好与调用构造函数的次序相反:最先被调用的构造函数,其对应的(同一对象中的)析构函数最后被调用,而最后被调用的构造函数,其对应的析构函数最先被调用. 简单来说,其构造函数的顺序就一句话: 基类构造函数 -> 成员的构造函数 -> 构造函数体内语句 看下面一个代码示例: #include <iostream> using namespace std; class A { publ

  • VUE中的mapState和mapActions的使用详解

    最近在开发一套系统,前端使用VUE开发,由于本人是后端开发,前端也会一点,但是VUE接触不多,在VUE项目开发遇到的一些坑记录一下,不是专业前端写好的不好,大家不要唝... 在VUE项目中经常会用到mapState和mapActions,mapState主要用于同步全局的变量或者对象,mapActions主要是用于同步定义的方法,一般两者是结合使用,mapState同步项目中定义的全局的变量或者对象,mapActions是用于变量或者对象为空时,调用方法定义的全局方法获取. mapActions

  • Matrix的set,pre,post调用顺序详解

    Matrix调用一系列set,pre,post方法时,可视为将这些方法插入到一个队列.当然,按照队列中从头至尾的顺序调用执行. 其中pre表示在队头插入一个方法,post表示在队尾插入一个方法.而set表示把当前队列清空,并且总是位于队列的最中间位置.当执行了一次set后:pre方法总是插入到set前部的队列的最前面,post方法总是插入到set后部的队列的最后面. 例一: Matrix m = new Matrix(); m.setRotate(45); m.setTranslate(80,

  • C#异步调用示例详解

    本文实例为大家分享了C#异步调用的具体代码,供大家参考,具体内容如下 using System; using System.Collections.Generic; using System.Text; using System.Runtime.InteropServices; using System.Threading.Tasks; namespace AsyncAppTest { ////异步调用示例详解 /// 第1步:定义委托:此委托的返回值.参数类型必须与要调用的异步方法一致: //

  • Vue 中的 computed 和 watch 的区别详解

    目录 computed 注意 应用场景 watch 总结 computed computed 看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed 的值在 getter 执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取 computed 的值时才会重新调用对应的 getter 来计算. 1)下面是一个比较经典简单的案例 <template> <div class="hello"> {{ful

  • Vue中mixins混入的介绍与使用详解

    目录 一.来自官网的描述 二.如何创建Mixins 三.项目中如何使用混入 四.与vuex的区别 五.与公共组件的区别 一.来自官网的描述 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 二.如何创建Mixins 在src目录下创建一个mixins文件夹,文件夹下新建一个myMixins.js文件.前面我们说了mixins是一个js对象,所以应该以对象的形式来定义my

  • Vue中watch清除过期副作用的案例详解

    在这里就不过多说watch的用法了,主要了解一下如何清除过期的副作用 通过一个案例来说吧: 一个可搜索的下拉选择器,用户第一次进行搜索的时候网速比较慢,请求虽然被服务端正确响应了,但是数据一直没有传输到客户端,用户看下拉数据没变化 就第二次搜索.第二次搜索之后网速恢复正常了,第二次请求的数据很快就客户端接收且正确渲染:紧接着第一次的数据也被客户端接收且客户端正确渲染. 这样就可能存在这样一种情况,第一次请求,服务端响应了请求但数据还没被客户端接收的时候,有人修改了数据:然后用户又点击刷新,响应数

  • C语言中函数参数的入栈顺序详解及实例

    C语言中函数参数的入栈顺序详解及实例 对技术执着的人,比如说我,往往对一些问题,不仅想做到"知其然",还想做到"知其所以然".C语言可谓博大精深,即使我已经有多年的开发经验,可还是有许多问题不知其所以然.某天某地某人问我,C语言中函数参数的入栈顺序如何?从右至左,我随口回答.为什么是从右至左呢?我终究没有给出合理的解释.于是,只好做了个作业,于是有了这篇小博文. #include void foo(int x, int y, int z) { printf(&quo

  • C++聚合关系类的构造函数的调用顺序详解

    C++聚合关系类的构造函数的调用顺序详解

    如图,表示一个聚合关系 下面就用简单的代码来实现 #pragma once class Engine { public: Engine(); ~Engine(); }; Engine.h #include <iostream> #include "Engine.h" using namespace std; Engine::Engine() { cout << "调用构造函数:Engine()" << endl; } Engine

随机推荐