广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue中的同步调用和异步调用方式
  • 578

0
分享到

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

2024-04-02 19:04:59 578人浏览 安东尼
摘要

目录Vue的同步调用和异步调用Promise实现异步调用async /await方法实现同步调用Vue同步和异步的问题基本语法实例Vue的同步调用和异步调用 Promise实现异步调

Vue的同步调用和异步调用

Promise实现异步调用

异步调用，增加a、b两个方法，并在mounted中调用。 观察客户端，并没有按照方法执行的顺序输出，使用Promise实现了异步调用。

在这里插入图片描述

观察客户端，并没有按照方法执行的顺序输出，使用Promise实现了异步调用。

async /await方法实现同步调用

使用async 和 await配合promise也可以实现同步调用，nuxt.js中使用async/await实现同步调用效果

在这里插入图片描述

观察服务端控制台发现是按照a，b的调用顺序输出1，2，使用async/await实现了同步调用。

Vue同步和异步的问题

之所以想到写这个问题是因为在工作中遇到一些相关的问题，最后用ES7的async-await 来解决这个问题。话不多述 ，进正题。

基本语法

async functionbasicDemo() {
    let result = await Math.random();
    console.log(result);
}
basicDemo();
// 0.6484863241051226//Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}

上述代码就是async-await的基本使用形式。有两个陌生的关键字async、await，同时函数执行结果似乎返回了一个promise对象。

  • async
async functiondemo01(){
    return 123;
}
demo01().then(val=> {
    console.log(val);// 123});

若 async 定义的函数有返回值，return 123;相当于Promise.resolve(123),没有声明式的 return则相当于执行了Promise.resolve();

  • await

await 可以理解为是 async wait 的简写。await 必须出现在 async 函数内部，不能单独使用。

functionnotAsyncFunc(){
    await Math.random();
}
notAsyncFunc();//Uncaught SyntaxError: Unexpected identifier

await 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西，但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行。

functionsleep(second){
    return new Promise((resolve, reject) => {
        setTimeout(()=> {
            resolve(' enough sleep~');
        }, second);
    })
}functionnORMalFunc(){
    console.log('normalFunc');
}async functionawaitDemo(){
    await normalFunc();
    console.log('something, ~~');
    let result = await sleep(2000);
    console.log(result);// 两秒之后会被打印出来}
awaitDemo()

希望通过上面的 demo，大家可以理解我上面的话。

实例

举例说明啊，你有三个请求需要发生，第三个请求是依赖于第二个请求的解构第二个请求依赖于第一个请求的结果。若用 ES5实现会有3层的回调，若用Promise 实现至少需要3个then。一个是代码横向发展，另一个是纵向发展。今天指给出 async-await 的实现哈~

我们仍然使用 setTimeout 来模拟异步请求

functionsleep(second, param){
    return new Promise((resolve, reject) => {
        setTimeout(()=> {
            resolve(param);
        }, second);
    })
}async functiontest(){
    let result1 = await sleep(2000, 'req01');
    let result2 = await sleep(1000, 'req02' + result1);
    let result3 = await sleep(500, 'req03' + result2);
    console.log(`${result3}${result2}${result1}`);
}
test();

错误处理

上述的代码好像给的都是resolve的情况，那么reject的时候我们该如何处理呢？

functionsleep(second){
    return new Promise((resolve, reject) => {
        setTimeout(()=> {
            reject('want to sleep~');
        }, second);
    })
}async functionerrorDemo(){
    let result = await sleep(1000);
    console.log(result);
}
errorDemo();// VM706:11 Uncaught (in promise) want to sleep~// 为了处理Promise.reject 的情况我们应该将代码块用 try catch 包裹一下async functionerrorDemoSuper(){
    try {
        let result = await sleep(1000);
        console.log(result);
    } catch (err) {
        console.log(err);
    }
}
errorDemoSuper();// want to sleep~

小心你的并行处理!!!

我这里为啥加了三个感叹号呢~，因为对于初学者来说一不小心就将 ajax 的并发请求发成了阻塞式同步的操作了，我就真真切切的在工作中写了这样的代码。await 若等待的是 promise 就会停止下来。业务是这样的，我有三个异步请求需要发送，相互没有关联，只是需要当请求都结束后将界面的 loading 清除掉即可。 刚学完 async await 开心啊，到处乱用~

functionsleep(second){
    return new Promise((resolve, reject) => {
        setTimeout(()=> {
            resolve('request done! ' + Math.random());
        }, second);
    })
}async functionbugDemo(){
    await sleep(1000);
    await sleep(1000);
    await sleep(1000);
    console.log('clear the loading~');
}
bugDemo();

loading 确实是等待请求都结束完才清除的。但是你认真的观察下浏览器的 timeline 请求是一个结束后再发另一个的（若观察效果请发真实的 ajax 请求）

那么，正常的处理是怎样的呢？

async functioncorrectDemo(){
    let p1 = sleep(1000);
    let p2 = sleep(1000);
    let p3 = sleep(1000);
    await Promise.all([p1, p2, p3]);
    console.log('clear the loading~');
}
correctDemo();// clear the loading~

以上。 

好了，这些仅为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue中的同步调用和异步调用方式

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

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

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

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • Vue中的同步调用和异步调用方式
    目录Vue的同步调用和异步调用Promise实现异步调用async /await方法实现同步调用Vue同步和异步的问题基本语法实例Vue的同步调用和异步调用 Promise实现异步调...
    99+
    2022-11-13
  • Vue中的同步调用和异步调用怎么实现
    这篇“Vue中的同步调用和异步调用怎么实现”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue中的同步调用和异步调用怎么实现...
    99+
    2023-06-28
  • Vue中的同步和异步调用顺序详解
    目录Vue的同步和异步调用顺序例如Vue两个异步方法顺序执行第一个异步方法第二个异步方法Vue的同步和异步调用顺序 Vue中的方法调用顺序是依次进行的，方法体内部也是依次执行的，但是...
    99+
    2022-11-13
  • Vue中的同步和异步调用顺序是什么
    今天小编给大家分享一下Vue中的同步和异步调用顺序是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。Vue的同步和异步调用...
    99+
    2023-06-28
  • C#中怎么实现同步调用和异步调用
    今天就跟大家聊聊有关C#中怎么实现同步调用和异步调用，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。C#委托的Invoke方法用来进行同步调用。同步调用也可以叫阻塞调用，它将阻塞当前线...
    99+
    2023-06-17
  • Unity同步/异步调用Android的方法实例
    目录1 Unity如何使用Android插件2 同步方法如何调用2.1 例子12.2 例子23 异步方法如何调用3.1 Android端3.1.1 添加依赖3.1.2 代码逻辑3.2...
    99+
    2022-11-12
  • Java中使用同步回调和异步回调的示例详解
    目录（一）同步回调（1）匿名内部类回调（2）Lambda 回调（二）异步回调（1）简单的线程回调（2）异步并行回调（3）CompletableFuture 回调小结完整代码（一）同步...
    99+
    2023-05-16
    java同步回调 java异步回调 java异步和同步回调
  • java中@Async异步调用的方法
    本篇内容主要讲解“java中@Async异步调用的方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“java中@Async异步调用的方法”吧!前言异步调用与同步调用同步调用：顺序执行，通过调用返...
    99+
    2023-07-02
  • SpringBoot中异步调用@Async的方法
    本篇内容主要讲解“SpringBoot中异步调用@Async的方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“SpringBoot中异步调用@Async的方法...
    99+
    2022-10-19
  • 说说Java异步调用的几种方式
    目录一、通过创建新线程二、通过线程池三、通过@Async注解四、通过CompletableFuture日常开发中，会经常遇到说，前台调服务，然后触发一个比较耗时的异步服务，且不用等异...
    99+
    2022-11-12
  • php中如何异步调用方法
    php中异步调用方法的操作步骤在返回客户端的html代码中，嵌入ajax调用或者嵌入一个img标签，src指向要执行的耗时脚本。使用popen函数打开一个指向进程的管道，该进程由派生给定的command命令执行而产生。使用CURL，设置CU...
    99+
    2022-10-08
  • Spring中的使用@Async异步调用方法
    目录使用@Async异步调用方法Async简介给Spring的TaskExecutor去完成本次记录Async使用场景异步请求与异步调用的区别异步请求的实现SpringBoot中异步...
    99+
    2022-11-12
  • JavaScript中回调函数及区分下同步和异步回调的示例分析
    小编给大家分享一下JavaScript中回调函数及区分下同步和异步回调的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1...
    99+
    2022-10-19
  • Android异步回调中的UI同步性问题分析
    Android程序编码过程中，回调无处不在。从最常见的Activity生命周期回调开始，到BroadcastReceiver、Service以及Sqlite等。Activity...
    99+
    2022-06-06
    回调 Android
  • 异步请求和异步调用的区别有哪些
    这篇文章主要讲解了“异步请求和异步调用的区别有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“异步请求和异步调用的区别有哪些”吧！异步请求和异步调用的区别...
    99+
    2022-10-19
  • Silverlight中同步调用WebClient的解决办法，是同步！
    代码如下： 复制代码 代码如下: private void button2_Click(object sender, RoutedEventArgs e) { Service1Cli...
    99+
    2022-11-21
    Silverlight 同步调用
  • 深入理解spring boot异步调用方式@Async
    本文主要给大家介绍了关于spring boot异步调用方式@Async的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：1.使用背景在日常开发的项目中，当访问其他人的接口较慢或者做耗时任务时，不想程序一直卡在耗时任务上，想程序能...
    99+
    2023-05-31
    springboot 异步调用 @async
  • rabbitmq同步调用的方法是什么
    RabbitMQ是一个消息中间件，它主要用于在不同的应用程序之间传递消息。它支持异步消息传递，但不直接支持同步调用。然而，可以使用一...
    99+
    2023-10-26
    rabbitmq
  • Spring Boot异步请求和异步调用的示例分析
    这篇文章主要为大家展示了“Spring Boot异步请求和异步调用的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Spring Boot异步请求和异步调用的示例分析”这篇文章吧。一、Sp...
    99+
    2023-06-16
  • Java异步调用的方法是什么
    这篇文章主要讲解了“Java异步调用的方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Java异步调用的方法是什么”吧！一、创建线程@Testpublic void&nbs...
    99+
    2023-06-27
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作