广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue中的同步和异步调用顺序详解
  • 356
分享到

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

2024-04-02 19:04:59 356人浏览 八月长安
摘要

目录Vue的同步和异步调用顺序例如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()
        },

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: Vue中的同步和异步调用顺序详解

本文链接: https://www.lsjlt.com/news/163567.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue中的同步和异步调用顺序详解
    目录Vue的同步和异步调用顺序例如Vue两个异步方法顺序执行第一个异步方法第二个异步方法Vue的同步和异步调用顺序 Vue中的方法调用顺序是依次进行的,方法体内部也是依次执行的,但是...
    99+
    2022-11-13
  • Vue中的同步和异步调用顺序是什么
    今天小编给大家分享一下Vue中的同步和异步调用顺序是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。Vue的同步和异步调用...
    99+
    2023-06-28
  • Vue中的同步调用和异步调用方式
    目录Vue的同步调用和异步调用Promise实现异步调用async /await方法实现同步调用Vue同步和异步的问题基本语法实例Vue的同步调用和异步调用 Promise实现异步调...
    99+
    2022-11-13
  • Java中使用同步回调和异步回调的示例详解
    目录(一)同步回调(1)匿名内部类回调(2)Lambda 回调(二)异步回调(1)简单的线程回调(2)异步并行回调(3)CompletableFuture 回调小结完整代码(一)同步...
    99+
    2023-05-16
    java同步回调 java异步回调 java异步和同步回调
  • Vue中的同步调用和异步调用怎么实现
    这篇“Vue中的同步调用和异步调用怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue中的同步调用和异步调用怎么实现...
    99+
    2023-06-28
  • C#中怎么实现同步调用和异步调用
    今天就跟大家聊聊有关C#中怎么实现同步调用和异步调用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。C#委托的Invoke方法用来进行同步调用。同步调用也可以叫阻塞调用,它将阻塞当前线...
    99+
    2023-06-17
  • 如何理解ajax中的async属性值同步和异步及同步和异步区别
    这篇文章给大家介绍如何理解ajax中的async属性值同步和异步及同步和异步区别,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。jquery中ajax方法有个属性async用于控制同步和...
    99+
    2022-10-19
  • 详解Java中异步转同步的六种方法
    目录一、问题应用场景二、分析三、实现方法1.轮询与休眠重试机制2.wait/notify3.Lock Condition4.CountDownLatch5.CyclicBarrier...
    99+
    2022-11-13
  • jquery中的ajax同步和异步的详细介绍
    本篇内容主要讲解“jquery中的ajax同步和异步的详细介绍”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jquery中的ajax同步和异步的详细介绍”吧!之...
    99+
    2022-10-19
  • Spring的事件和监听器-同步与异步详解
    目录Spring的事件和监听器-同步与异步1、首先新建StartWorkflowEvent.java,2、新建一个监听器StartWorkflowListener.java3、创建一...
    99+
    2022-11-12
  • java 中同步、异步、阻塞和非阻塞区别详解
    java 中同步、异步、阻塞和非阻塞区别详解简单点说:阻塞就是干不完不准回来,一直处于等待中,直到事情处理完成才返回; 非阻塞就是你先干,我先看看有其他事没有,一发现事情被卡住,马上报告领导。我们拿最常用的send和recv两个函数来说吧....
    99+
    2023-05-31
    java 同步 异步
  • Silverlight中同步调用WebClient的解决办法,是同步!
    代码如下: 复制代码 代码如下: private void button2_Click(object sender, RoutedEventArgs e) { Service1Cli...
    99+
    2022-11-21
    Silverlight 同步调用
  • JavaScript中回调函数及区分下同步和异步回调的示例分析
    小编给大家分享一下JavaScript中回调函数及区分下同步和异步回调的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1...
    99+
    2022-10-19
  • 同步、异步、并发:Java和Django中的重要概念解析
    在开发软件时,同步、异步和并发是非常重要的概念。Java和Django都是非常流行的编程语言和框架,这篇文章将解析这些概念在Java和Django中的使用方法和差异。 同步和异步 同步和异步是指任务之间的关系,它们是指程序执行的方式。在同...
    99+
    2023-09-10
    django 同步 并发
  • JS难点同步异步和作用域与闭包及原型和原型链详解
    目录JS三座大山同步异步同步异步区别作用域、闭包函数作用域链块作用域闭包闭包解决用var导致下标错误的问题投票机闭包两个面试题原型、原型链原型对象原型链完整原型链图JS三座大山 同步...
    99+
    2022-11-12
  • 关于java中@Async异步调用详细解析附代码
    目录前言1. @Async讲解2. 用法2.1 同步调用2.2 异步调用3. 自定义线程池前言 异步调用与同步调用 同步调用:顺序执行,通过调用返回结果再次执行下一个调用异步调用:通...
    99+
    2022-11-13
  • Node.js中同步和异步编程的区别及使用方法
    目录一、进程和线程二、同步和异步同步阻塞异步问题一、进程和线程 代码编写完毕在编译的过程中计算机的内存中会开辟一个空间来存储代码,这个空间就相当于是进程,可以将进程类比于工厂的厂房,...
    99+
    2023-05-18
    Node.js中同步和异步 Node.js 同步 Node.js 异步
  • JavaScript三大重点同步异步与作用域和闭包及原型和原型链详解
    目录1. 同步、异步2. 作用域、闭包闭包作用域3. 原型、原型链原型(prototype)原型链 如图所示,JS的三座大山: 同步、异步作用域、闭包原型、原型链 1. 同步、异步 ...
    99+
    2022-11-13
  • Spring方法中调用异步方法进行事务控制详解
    Spring 异步事务控制 文章目录 Spring 异步事务控制Spring 事务源码逻辑一、事务拦截器拦截二、进行事务控制三、事务开启 / 回滚 /提交操作四、事务完成,清除事务信息简单总结 异步方法事务控制方案一:自身编码...
    99+
    2023-08-20
    spring java 数据库 mysql
  • 详解Android的OkHttp包编写异步HTTP请求调用的方法
    OkHttp 除了支持常用的同步 HTTP 请求之外,还支持异步 HTTP 请求调用。在使用同步调用时,当前线程会被阻塞,直到 HTTP 请求完成。当同时发出多个 HTTP 请...
    99+
    2022-06-06
    okhttp 调用 方法 http请求 Android
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作