深入浅出探究JavaScript中的async与await

目录
  • 1、前言
  • 2、详解
    • 2.1、async
      • 2.1.1、函数返回非Promise对象
      • 2.1.2、函数返回Promise对象
    • 2.2、await
    • 2.3、async、await结合使用
    • 2.4、async、await异常处理
  • 3、总结

1、前言

​ async函数,也就是我们常说的async/await,是在ES2017(ES8)引入的新特性,主要目的是为了简化使用基于Promise的API时所需的语法。asyncawait关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用Promise。

2、详解

​ async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果。需要注意的是await关键字只在async函数内有效,如果在async函数体之外使用它,会抛出语法错误。

2.1、async

​ async函数返回一个 Promise对象,可以使用then方法添加回调函数。只要使用async,不管函数内部返回的是不是Promise对象,都会被包装成Promise对象。

话不多说,上代码看效果:

2.1.1、函数返回非Promise对象

async function testAsync() {
    return "hello async";
}

const result = testAsync();
console.log(result);

​ 可以看出函数直接返回字符串时,返回的是Promise对象,相当于直接通过Promise.resolve()将字符串封装为Promise对象。如果函数没有返回值时,PromiseResult结果为undefined。

2.1.2、函数返回Promise对象

	async function testAsync() {
		return new Promise(function(resolve, reject) {
			if (true) {
				resolve('resolve return')
			} else {
				reject('reject return')
			}
		})
	}
	console.log(testAsync());

可以看出返回的也是Promise对象。

2.2、await

​ await关键字可以跟在任意变量或者表达式之前,但通常await后面会跟一个异步过程。await使用时,会阻塞后续代码执行。我们先抛开async,单独谈await。

​ 由于await只能在async标识的函数内使用,以下例子请在浏览器控制台执行看效果。

function testAsync() {
	return new Promise(function(resolve, reject) {
		setTimeout(function() {
			if (true) {
				console.log('请求中...')
				resolve('resolve return')
			} else {
				reject('reject return')
			}
		}, 2000)
	})
}
var result = await testAsync();
var result1 = await "testAsync后执行";
console.log(result);
console.log(result1);

​ 可以看出,使用了await后,必须得等testAsync方法执行完后,才会执行后续代码。您也可以尝试一下把testAsync前的async去掉,看看跟加上await时有啥区别。

2.3、async、await结合使用

​ 上面我们知道了await会阻塞后续代码运行,那怎么解决这个问题呢?就需要用到async,使用async后,函数执行时,一旦遇到await就会先返回一个Promise对象,等到await后的操作完成后,再接着执行async函数体内的语句。

​ 先上语法:

 async function 函数名() {
 	await XXX;
 }

​ 上示例代码:

function testAsync() {
	return new Promise(function(resolve, reject) {
		setTimeout(function() {
			if (true) {
				console.log('请求中...')
				resolve('resolve return')
			} else {
				reject('reject return')
			}
		}, 2000)
	})
}

function testAsync2() {
	return new Promise(function(resolve, reject) {
		setTimeout(function() {
			if (true) {
				console.log('请求中2...')
				resolve('resolve return2')
			} else {
				reject('reject return2')
			}
		}, 2000)
	})
}

async function test() {
	console.log('test开始...');
	var value1 = await testAsync();
	console.log(value1);
	var value2 = await testAsync2();
	console.log(value2);
	var value3 = await 'test结束...';
	console.log(value3);
}

console.log(test());

​ 上图可以看出遇到第一个await后,立即返回了Promise对象,然后再按顺序去执行testAsync函数,等待testAsync函数执行后再去执行testAsync2函数。还可以看出async函数可以简化Promise的语法,以往我们需要使用.then去处理回调,现在我们可以使用await像写同步代码一样去写异步代码。

​ 我们再升级一下,在上面的基础上再加入两个普通函数:

function fun1() {
	return '函数1'

}

function fun2() {
	return '函数2'
}

function fun3() {
	console.log(fun1());
	console.log(test()); // async/await函数
	console.log(fun2());
}

 console.log(fun3());

我们先梳理一下函数的执行过程,

1、先执行函数1

2、进入test函数并输出开始

3、在test函数中遇到await,立即返回Promise对象

4、执行函数2

5、执行test函数中的testAsync方法

6、等到test函数中的testAsync方法执行完后,继续执行testAsync2方法

7、test函数结束

​ 可以看出,async函数在遇到await后会立即返回Promise对象,继续执行async函数外部后续逻辑,async函数内部会被await阻塞并按顺序执行代码逻辑。

2.4、async、await异常处理

​ await后面的函数是有可能出现异常的,所以最好把await命令放在try...catch代码块中。如果await后是Promise对象,也可以使用.catch进行捕获。

 // 第一种写法
 async function myFunction() {
   try {
     await something();
   } catch (err) {
     console.log(err);
   }
 }

 // 第二种写法
 async function myFunction() {
   await somethingPromise()
   .catch(function (err) {
     console.log(err);
   });
 }

3、总结

​ async函数在遇到await后会立即返回Promise对象,继续执行async函数外部逻辑,async函数内部会被await阻塞并按顺序执行代码逻辑。

​ 可以使用try...catch或.catch对async函数进行异常处理。

到此这篇关于深入浅出探究JavaScript中的async与await的文章就介绍到这了,更多相关JavaScript async await内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript中async,await的使用和方法

    JS中 async函数和await 关键字 function hellworld() { return "您好!美好世界!"; } console.log(hellworld()); // 您好!美好世界! async function asyHellworld() { return "您好!美好世界!"; } console.log(asyHellworld()); // Promise { '您好!美好世界!' } 普通函数 hellworld 将简单地返回字符

  • JS中async/await实现异步调用的方法

    async/await多个函数关联调用 async/await使得异步代码看起来像同步代码 async函数会隐式地返回一个promise,而promise的reosolve值就是函数return的值 Async/Await不需要写.then,不需要写匿名函数处理Promise的resolve值,也不需要定义多余的data变量,还避免了嵌套代码 async声明一个异步函数 await只能在async函数中使用,后面跟一个promise对象 所以在模拟异步调用函数时,函数体内返回promise as

  • 详解JavaScript Promise和Async/Await

    概述 一般在开发中,查询网络API操作时往往是比较耗时的,这意味着可能需要一段时间的等待才能获得响应.因此,为了避免程序在请求时无响应的情况,异步编程就成为了开发人员的一项基本技能. 在JavaScript中处理异步操作时,通常我们经常会听到 "Promise "这个概念.但要理解它的工作原理及使用方法可能会比较抽象和难以理解. 四个示例 那么,在本文中我们将会通过实践的方式让你能更快速的理解它们的概念和用法,所以与许多传统干巴巴的教程都不同,我们将通过以下四个示例开始: 示例1:用生

  • JavaScript async/await原理及实例解析

    随着Node 7的发布,越来越多的人开始研究据说是异步编程终级解决方案的 async/await. 异步编程的最高境界,就是根本不用关心它是不是异步. async 函数就是隧道尽头的亮光,很多人认为它是异步操作的终极解决方案. async 和 await 起了什么作用 async 起什么作用 这个问题的关键在于,async 函数是怎么处理它的返回值的! 我们当然希望它能直接通过return语句返回我们想要的值,但是如果真是这样,似乎就没 await 什么事了.所以,写段代码来试试,看它到底会返回

  • JS为什么说async/await是generator的语法糖详解

    关于async的介绍,在阮一峰的ES6入门教程中说到: async 函数是什么?一句话,它就是 Generator 函数的语法糖. 可是,为什么这么说呢? 首先,比如说有一个异步操作,使用 async/await 语法来以同步模拟异步操作. 使用 async/await 实现一个 sleep 的功能 function sleep(time) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(1); },

  • 深入浅出探究JavaScript中的async与await

    目录 1.前言 2.详解 2.1.async 2.1.1.函数返回非Promise对象 2.1.2.函数返回Promise对象 2.2.await 2.3.async.await结合使用 2.4.async.await异常处理 3.总结 1.前言 ​ async函数,也就是我们常说的async/await,是在ES2017(ES8)引入的新特性,主要目的是为了简化使用基于Promise的API时所需的语法.async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,

  • Node.js中的async 和 await 关键字微任务和宏任务

    目录 async 和 await 关键字 async 关键字 await关键字 async 和 await 解决回调地狱 JS执行机制(事件循环) 微任务和宏任务 宏任务 微任务 宏任务和微任务执行机制 async 和 await 关键字 async 和 await 是 ES2017 中提出来的,async 和 await 两个关键字的出现,简化的 Promise 的使用. async 关键字 async关键字使用比较简单,所以 async 的使用注意以下三点即可 : async 用于修饰一个

  • JavaScript中使用Async实现异步控制

    async官方DOC 介绍 node安装 npm install async --save 使用 var async = require('async') js文件 github.com/caolan/asyn- async提供了很多函数用于异步流程控制,下面是async核心的几个函数,完整的函数请看async官方DOC async.map(['file1','file2','file3'], fs.stat, function(err, results) { // results is now

  • 详解Node.js中的Async和Await函数

    在本文中,你将学习如何使用Node.js中的async函数(async/await)来简化callback或Promise. 异步语言结构在其他语言中已经存在了,像c#的async/await.Kotlin的coroutines.go的goroutines,随着Node.js 8的发布,期待已久的async函数也在其中默认实现了. Node中的async函数是什么? 当函数声明为一个Async函数它会返回一个 AsyncFunction 对象,它们类似于 Generator 因为执可以被暂停.唯

  • 浅谈C#中的Async和Await的用法详解

    众所周知C#提供Async和Await关键字来实现异步编程.在本文中,我们将共同探讨并介绍什么是Async 和 Await,以及如何在C#中使用Async 和 Await. 同样本文的内容也大多是翻译的,只不过加上了自己的理解进行了相关知识点的补充,如果你认为自己的英文水平还不错,大可直接跳转到文章末尾查看原文链接进行阅读. 写在前面 自从C# 5.0时代引入async和await关键字后,异步编程就变得流行起来.尤其在现在的.NET Core时代,如果你的代码中没有出现async或者await

  • C#中使用async和await实现异步Udp通讯的示例代码

    目录 C/S架构 客户端实现 客户端主流程和实现 客户端发送消息实现 客户端监听消息实现 服务器实现 服务器主流程和实现 服务器发送消息实现 服务器监听消息实现 总结 在之前的C#版本中, 如果我们想要进行异步的Udp, 需要单开线程接收消息, C#7.1开始, 我们可以使用async/await关键字来编写异步代码, 我们今天一起来探索怎么实现. C/S架构 我们要实现两个app, 一个客户端和一个服务器, 各自都可以发消息和收消息.发消息很简单, 收消息的话需要一直在端口上监听. udp相比

  • .NET中的async和await关键字使用及Task异步调用实例

    其实早在.NET 4.5的时候M$就在.NET中引入了async和await关键字(VB为Async和Await)来简化异步调用的编程模式.我也早就体验过了,现在写一篇日志来记录一下顺便凑日志数量(以后面试之前可以用这个"复习"一下). (一)传统的异步调用 在比较"古老"的C#程序中经常可以看到IAsyncResult.BeginInvoke之类的异步调用"踪迹".先来简单的复习一下吧. 假如我们有一个方法生成字符串,而生成这个字符串需要10秒

  • 详解C#中的Async和Await用法

    这篇文章由Filip Ekberg为DNC杂志编写. 自跟随着.NET 4.5 及Visual Studio 2012的C# 5.0起,我们能够使用涉及到async和await关键字的新的异步模式.有很多不同观点认为,比起以前我们看到的,它的可读性和可用性是否更为突出.我们将通过一个例子来看下它跟现在的怎么不同. 线性代码vs非线性代码 大部分的软件工程师都习惯用一种线性的方式去编程,至少这是他们开始职业生涯时就被这样教导.当一个程序使用线性方式去编写,这意味着它的源代码读起来有的像Figure

  • 深入浅出分析javaScript中this用法

    本文实例讲述了javaScript中this用法.分享给大家供大家参考.具体分析如下: 之前学javascript的时候总搞不清this,这个this不像java里的this那么好理解.我后来也是看了许多别人写的文章,才理解过来的.现在把别人写的东西搬过来,怕以后忘记. 总得来说 this的指向分三种.指向全局window,该对象,构造函数. 结论:在Javascript中,this指向函数执行时的当前对象.  简单点说就是调用的方法属于哪个对象,this就指向那个对象. 1. 全局window

  • 详解koa2学习中使用 async 、await、promise解决异步的问题

    关键词:async .await.promise 这三个东西 可以优雅的解决异步问题.在学习koa2的时候遇到了获取数据后再进行模板渲染的异步问题.在查找各种资料后成功的解决了该问题,现在写个笔记记录一下. 先说一下async.await,第一次见到这两个词是在学习vue的时候.因为前端在写代码的时候经常的会遇到向后台请求数据这样的场景,等待数据返回才可以进行下一步的操作.这就不得不处理异步这种情况. async.await基本的语法就是: let asyncFn = async()=> { l

随机推荐