async/await 的用法

这篇具有很好参考价值的文章主要介绍了async/await 的用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、async和await定义

async 是异步的意思,而 await 是等待的意思,await 用于等待一个异步任务执行完成的结果。
1.async/await 是一种编写异步代码的新方法(以前是采用回调和 promise)。
2. async/await 是建立在 promise 的基础上。
3. async/await 像 promise 一样,也是非阻塞的。
4. async/await 让异步代码看起来、表现起来更像同步代码。

使用场景
在实际开发中,如果你遇到了等第一个请求返回数据完,再执行第二个请求(可能第二个请求要传的参数就是第一个请求接口返回的数据)这个问题。

代码

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

一、async

	async function testAsync(){		//带async关键字的函数,是声明异步函数,返回值是promise对象,
		return 'Hello async';
	}
	testAsync();					//打印结果:Promise {<fulfilled>: 'Hello async'}

二、获取异步函数的数据

方法1:

	async function testAsync(){		
		return 'Hello async';
	}
	var result = testAsync();
	result.then((data)=>{
	    console.log(data);			//Hello async
	})

方法2:

function getData(){
		return 'Hello async';
	}
	async function test(){
		var d = await getData();	//await 是等待异步方法执行完成,可以获取异步方法里面的数据,但是必须得用在异步方法里面
	}
	test();							//Hello async

三、应用场景

先请求接口1,获取到接口1返回结果后,将其作为接口2的参数,再去请求接口2

	async function getD(){
		var a = await getDataF()	//接口1
		var b = await getDataS(a)	//接口2
		console.log(b);				//接口2返回的值
	}
	getD()

四、注意事项

1、async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成
2、await只能在async函数中使用,不然会报错
3、async函数返回的是一个状态为fuifilled的Promise对象
4、类似于排队买东西,一个人结完账后才能轮到下个人,在async函数中,await规定了异步操作只能一个一个排队执行,从而达到用同步方式,执行异步操作的效果文章来源地址https://www.toymoban.com/news/detail-724581.html

到了这里,关于async/await 的用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • JavaScript:深入探索async/await的使用

    在JavaScript的异步编程领域,ES8引入的 async/await 语法是一项重要的创新。它让异步代码看起来更像同步代码,使得处理异步操作变得更加清晰和简洁。本文将深入探索 async/await 的使用,帮助你充分发挥这项技术的优势。 1. 什么是 async/await ?   async/await 是一种基于Promise的异步

    2024年02月13日
    浏览(11)
  • 重学JavaScript高级(十二):async/await-事件循环-面试高频

    重学JavaScript高级(十二):async/await-事件循环-面试高频

    前面我们学习了生成器和迭代器,那么在本篇文章中,我们主要讲解生成器与Promise的结合使用,从而引出async/await语法,同时会涉及面试中频次最高的一个知识点: 事件循环 首先需要了解回调地狱 在Promise出来之前,我们多次请求网络接口,有可能产生回调地狱 而Promise的出

    2024年02月02日
    浏览(26)
  • 深入学习JavaScript系列(七)——Promise async/await generator

    深入学习JavaScript系列(七)——Promise async/await generator

    本篇属于本系列第七篇 第一篇:#深入学习JavaScript系列(一)—— ES6中的JS执行上下文 第二篇:# 深入学习JavaScript系列(二)——作用域和作用域链 第三篇:# 深入学习JavaScript系列(三)——this 第四篇:# 深入学习JavaScript系列(四)——JS闭包 第五篇:# 深入学习JavaScrip

    2023年04月08日
    浏览(13)
  • 深入理解Async/Await:从原理到实践的JavaScript异步编程指南

    深入理解Async/Await:从原理到实践的JavaScript异步编程指南

    理解 async/await 的原理和使用方法是理解现代JavaScript异步编程的关键。这里我会提供一个详细的实例,涵盖原理、流程、使用方法以及一些注意事项。代码注释会尽量详尽,确保你理解每个步骤。 实例:使用async/await进行异步操作 详细解释和注释: 异步函数定义: async func

    2024年02月05日
    浏览(16)
  • 【前端】浅谈async/await异步传染性

    【前端】浅谈async/await异步传染性

    \\\"异步传染性\\\"问题通常是指,当一个函数使用了async和await,其调用者也需要使用async和await处理异步操作,导致整个调用链都变成异步的。这种情况可能导致代码变得更复杂,不易维护。 类似于C# try catch的层层上抛,在某一层catch 查了很多资料 ,对于这个问题说法还都不一样

    2024年01月23日
    浏览(12)
  • 前端(十二)——深入理解和使用 async和await

    前端(十二)——深入理解和使用 async和await

    😛博主:小猫娃来啦 😛文章核心: 深入理解和使用 async和await 在 JS中,异步操作是无法避免的,而处理异步操作最常用的方法是使用回调函数或者 Promise 。然而,自 ES2017 引入了 async/await 之后,我们可以通过更简洁、可读性更好的方式来处理异步代码。本文将从浅层次到深

    2024年02月12日
    浏览(8)
  • Js的FileReader读取文件内容(async/await)

      要通过FileReader判断上传的文件是否为图片,可以使用FileReader读取文件内容,并判断文件的MIME类型是否为图片类型。 以下是一个示例代码,可以在文件上传时触发change事件,并检查上传的文件是否为图片类型: 上面的代码首先使用FileReader读取上传的文件,并将文件内容转

    2024年02月09日
    浏览(8)
  • 前端面试:【异步编程】Callback、Promise和Async/Await

    嗨,亲爱的JavaScript探险家!在JavaScript开发的旅程中,你会经常遇到异步编程的需求。为了处理异步操作,JavaScript提供了多种机制,包括Callbacks、Promises和Async/Await。本文将深入介绍这些机制,让你能够更好地处理异步任务。 1. Callbacks:传统的异步方式 Callbacks是JavaScript中最早

    2024年02月11日
    浏览(46)
  • 前端异步编程全套:xmlhttprequest > ajax > promise > async/await

    同步与异步区别 同步:按顺序,依次执行,向服务器发送请求--客户端做其他操作 异步:分别执行,向服务器发送请求==同时执行其他操作 原生xmlhttprequest 四步骤 创建ajax对象 设定数据的传输方式(get、post),打开连接open() 获得响应数据 属性 描述 onreadystatechange 当readysta

    2024年02月01日
    浏览(48)
  • 一盏茶的功夫帮你彻底搞懂JavaScript异步编程从回调地狱到async/await

    一盏茶的功夫帮你彻底搞懂JavaScript异步编程从回调地狱到async/await

     🎬 江城开朗的豌豆 :个人主页  🔥  个人专栏   :《 VUE 》 《 javaScript 》 ⛺️  生活的理想,就是为了理想的生活 ! 目录 📘 1. 引言 📘 2. 使用方法 📘 3. 实现原理 📘 4. 写到最后   在深入讨论 async/await 之前,我们需要了解一下 JavaScript 的单线程和非阻塞的特性。

    2024年02月08日
    浏览(11)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包