iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >一文教会你vue中使用async和await
  • 648
分享到

一文教会你vue中使用async和await

vue使用async awaitvue async await 2022-11-13 18:11:31 648人浏览 薄情痞子
摘要

目录引言async和await定义使用场景实战场景补充:Vue中async await请求处理小结引言 在我们进行实际开发中会遇到异步请求的问题,这时候我们的异步请求的存在就非常的具

引言

在我们进行实际开发中会遇到异步请求的问题,这时候我们的异步请求的存在就非常的具备合理性了!接下来将会讲述异步编程终级解决方案async/await。

async和await定义

async 是异步的意思,而 await 是等待的意思,await 用于等待一个异步任务执行完成的结果。

1.async/await 是一种编写异步代码的新方法(以前是采用回调和 promise)。

2. async/await 是建立在 promise 的基础上。

3. async/await 像 promise 一样,也是非阻塞的。

4. async/await 让异步代码看起来、表现起来更像同步代码。

使用场景

在实际开发中,相信大家都会遇到关于发送请求获取数据的问题,例如:如果你遇到了等第一个请求返回数据完,再执行第二个请求(可能第二个请求要传的参数就是第一个请求接口返回的数据)这个问题,该怎么去处理呢?由于我们在不使用异步请求的情况下,默认发送多个请求是同步执行的,就会导致我们也不知道到底是哪个接口优先被执行!!!

所以,我们必须要学会使用async/await!

实战场景

话不多说,直接上代码:

const datas = async ()=> {
  await request.selectPies(Route.path.split('/')[3]).then(res=>{
  	states.ids = res.obj
	console.log(res)
  })
  //查询发帖子用户信息
  await request.selectUsers(states.ids).then(res=>{
    console.log(res.obj)
  })
}
datas()

这里是在vue3语法糖中使用异步请求,从代码看出,第二个接口要使用第一个接口返回的数据,因此使用了异步请求。

补充:vue中async await请求处理

Promise.all() 用法示例:

const wait = ms => new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(`wait ${ms}ms`)
        resolve()
    }, ms)
})
const PA = Promise.all([wait(3000), wait(1000), wait(2000)])
// 依次打印:wait 1000ms wait 2000ms wait 3000ms

async-await 同时触发多个异步操作示例

const wait = ms => new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(`wait ${ms}ms`)
        resolve()
    }, ms)
})
;(async () => {
    await Promise.all([wait(3000), wait(1000), wait(2000)])
    // 依次打印:wait 1000ms wait 2000ms wait 3000ms
})()

问题:接口B需要接口A返回的数据,如果同时请求,控制不了返回速度,会出现B快于A,

实现:

async表示函数里有异步操作,

await表示紧跟在后面的表达式需要等待结果。

   methods: {
      fetchData: async function () {
        var that = this
        var code = Store.fetchYqm();
        let params = {
          inviteCode: code
        }
        const response = await Http.post(params,api.getCode)
         var resJSON = response.data;
      }
}

小结

在现在以前后端分离开发的模式下,需要访问后端接口,我们必须要懂得什么是异步请求,异步请求很简单,就是给接口的访问加上了顺序,防止它们无厘头的不受顺序限制发送请求!

到此这篇关于vue中使用async和await的文章就介绍到这了,更多相关vue使用async和await内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 一文教会你vue中使用async和await

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

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

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

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

下载Word文档
猜你喜欢
  • 一文教会你vue中使用async和await
    目录引言async和await定义使用场景实战场景补充:vue中async await请求处理小结引言 在我们进行实际开发中会遇到异步请求的问题,这时候我们的异步请求的存在就非常的具...
    99+
    2022-11-13
    vue使用async await vue async await
  • 一文带你了解async/await的使用
    目录关于 JS 中异步编程的一点历史有时 Promise 的级别太低,不适合使用使用 async/awaitasync/await 在同步和异步代码中提供了统一的体验async/aw...
    99+
    2024-04-02
  • vue中async-await如何使用
    本篇文章为大家展示了vue中async-await如何使用,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。曾经见过为了让钩子函数的异步代码可以同步执行,而对钩子函数使...
    99+
    2024-04-02
  • 一篇文章弄懂C#中的async和await
    目录前言 async await 从以往知识推导 创建异步任务 创建异步任务并返回Task 异步改同步 说说 await Task 说说 async Task<TResult&...
    99+
    2024-04-02
  • JavaScript中async,await的使用和方法
    JS中 async函数和await 关键字 function hellworld() { return "您好!美好世界!"; } console.log...
    99+
    2024-04-02
  • vue中异步函数async和await的用法说明
    目录异步函数async和await用法async/await为什么叫异步外异内同异步函数async和await用法 先说一下async的用法,它作为一个关键字放到函数前面,用于表示函...
    99+
    2024-04-02
  • Node.js中async和await关键字如何使用
    本篇内容主要讲解“Node.js中async和await关键字如何使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Node.js中async和await关键字如何使用”吧!async 和 aw...
    99+
    2023-07-02
  • JavaScript中async和await的使用及队列详情
    目录一、宏任务和微任务的队列入门知识,可以参考之前的文章:1.async && await概念2.async && await基本使用二、async&...
    99+
    2024-04-02
  • 一文教会你如何运行vue项目
    目录一、运行vue项目1、下载node.js2、安装 webpack3、安装vue-cli脚手架4、使用vue-cli创建项目5、运行项目二、运行别人的项目1、删除package-l...
    99+
    2024-04-02
  • NodeJs中怎么使用async和await处理异步
    NodeJs中怎么使用async和await处理异步,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。场景远古时代我们在编写exp...
    99+
    2024-04-02
  • 一文教会你如何搭建vue+springboot项目
    目录前言开发使用的软件vue项目搭建环境配置cmd命令vue ui 创建项目vue项目制作方向梳理通过软件vscode打开项目vue 配置vue-router如何配置axiosui框...
    99+
    2024-04-02
  • 一篇文章教会你部署vue项目到docker
    目录第一步第二步,生成镜像 第三步,生成(启动)一个容器总结让我在5分钟你教不会你把项目部署到docker,前提是你得服务器装有docker,这里方便装宝塔,大佬当我没说。...
    99+
    2024-04-02
  • 一文教会你在sqlserver中创建表
    目录前言方法如下:总结前言 SQL Server创建表是最常见也是最常用的操作之一,下面就为您介绍SQL Server创建表的语句写法,供您参考,希望可以让您对SQL Server创...
    99+
    2024-04-02
  • 一文教会你用Python读取PDF文件
    目录实战场景Python PDF 实战编码补充实战场景 Python 工程师在日常的工作中,经常会碰到解析和处理PDF文件的情况,实战中需求主要分为如下情况: 提取 PDF 中的文字...
    99+
    2024-04-02
  • 一文教会你使用Python批量缩放图片
    目录导读实际演示阶段详细介绍该库总结导读 为了解决图片被改变大小后,比例保持不变(这样就不会变形了) 图片需要压缩,避免填图后的word文件太大通过Image模块中的resize函数...
    99+
    2024-04-02
  • 一文教会你用python裁剪图片
    目录如何使用python裁剪图片一、 安装PIL库二、构建思路三、完整代码总结如何使用python裁剪图片 如上图所示,这是一张包含了各类象棋棋子的图片。我们需要将其中每一个棋子都...
    99+
    2024-04-02
  • 一篇文章教会你PYcharm的用法
    目录一、界面介绍二、设置中文(无需汉化包)三、常用快捷键一些常用设置:四、Python 标识符和关键字1、标识符2、 关键字五、行和缩进六、Python 引号七、Python注释1、...
    99+
    2024-04-02
  • 一文教你使用AspectJ
    本篇文章为大家展示了一文教你使用AspectJ,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。AOP虽然是方法论,但就好像OOP中的Java一样,一些先行者也开发了一套语言来支持AOP。目前用得比较火...
    99+
    2023-05-31
    aspectj ct
  • 一文教你使用MyBatis
    这期内容当中小编将会给大家带来有关一文教你使用MyBatis,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。什么是 MyBatisMyBatis 是支持定制化 SQL、存储过程以及高级映射的优秀的持久层框架...
    99+
    2023-05-31
    mybatis
  • 一文教会你如何在JavaScript中使用展开运算符
    目录前言语法功能以及参数创建数组创建对象将 NodeList 转换为数组从数组中删除重复项扩展运算符与休息运算符结论总结前言 在本教程中,您将了解在 JavaScript 中使用扩展...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作