JavaScript async/await原理及实例解析

2024-12-02 23:56:40

随着Node 7的发布，越来越多的人开始研究据说是异步编程终级解决方案的 async/await。

异步编程的最高境界，就是根本不用关心它是不是异步。

async 函数就是隧道尽头的亮光，很多人认为它是异步操作的终极解决方案。

async 和 await 起了什么作用

async 起什么作用

这个问题的关键在于，async 函数是怎么处理它的返回值的！

我们当然希望它能直接通过return语句返回我们想要的值，但是如果真是这样，似乎就没 await 什么事了。所以，写段代码来试试，看它到底会返回什么：

async function testAsync() {
  return "hello async";
}
const result = testAsync();
console.log(result);

看到输出就恍然大悟了——输出的是一个 Promise 对象。

c:\var\test> node --harmony_async_await .
Promise { 'hello async' }

所以，async 函数返回的是一个 Promise 对象。从文档中也可以得到这个信息。async 函数（包含函数语句、函数表达式、Lambda表达式）会返回一个 Promise 对象，如果在函数中return一个直接量，async 会把这个直接量通过Promise.resolve()封装成 Promise 对象。

async 函数返回的是一个 Promise 对象，所以在最外层不能用 await 获取其返回值的情况下，我们当然应该用原来的方式：then()链来处理这个 Promise 对象，就像这样

testAsync().then(v => {
  console.log(v);  // 输出 hello async
});

　　语法很简单，就是在函数前面加上async关键字，来表示它是异步的，那怎么调用呢？async函数也是函数，平时我们怎么使用函数就怎么使用它，直接加括号调用就可以了，为了表示它没有阻塞它后面代码的执行，我们在async函数调用之后加一句console.log;

async function timeout() {
  return 'hello world'
}
timeout();
console.log('虽然在后面，但是我先执行');

　　打开浏览器控制台，我们看到了

　　async函数 timeout 调用了，但是没有任何输出，它不是应该返回 'hello world', 先不要着急，看一看timeout()执行返回了什么？把上面的 timeout()语句改为console.log(timeout())

async function timeout() {
  return 'hello world'
}
console.log(timeout());
console.log('虽然在后面，但是我先执行');

　　继续看控制台

　　原来async函数返回的是一个promise对象，如果要获取到promise返回值，我们应该用then方法，继续修改代码

async function timeout() {
  return 'hello world'
}
timeout().then(result => {
  console.log(result);
})
console.log('虽然在后面，但是我先执行');

　　看控制台

　　我们获取到了"hello world', 同时timeout的执行也没有阻塞后面代码的执行，和我们刚才说的一致。

　　这时，你可能注意到控制台中的Promise有一个resolved，这是async函数内部的实现原理。如果async函数中有返回一个值 ,当调用该函数时，内部会调用Promise.solve()方法把它转化成一个promise对象作为返回，但如果timeout函数内部抛出错误呢？那么就会调用Promise.reject()返回一个promise对象，这时修改一下timeout函数

async function timeout(flag) {
  if (flag) {
    return 'hello world'
  } else {
    throw 'my god, failure'
  }
}
console.log(timeout(true)) // 调用Promise.resolve() 返回promise 对象。
console.log(timeout(false)); // 调用Promise.reject() 返回promise 对象。

　　控制台如下：

　　如果函数内部抛出错误， promise对象有一个catch方法进行捕获。

timeout(false).catch(err => {
  console.log(err)
})

　　async关键字差不多了，我们再来考虑await关键字，await是等待的意思，那么它等待什么呢，它后面跟着什么呢？其实它后面可以放任何表达式，不过我们更多的是放一个返回promise对象的表达式。注意await关键字只能放到async函数里面

　　现在写一个函数，让它返回promise对象，该函数的作用是2s之后让数值乘以2

// 2s 之后返回双倍的值
function doubleAfter2seconds(num) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2 * num)
    }, 2000);
  } )
}

　　现在再写一个async函数，从而可以使用await关键字， await后面放置的就是返回promise对象的一个表达式，所以它后面可以写上doubleAfter2seconds函数的调用

async function testResult() {
  let result = await doubleAfter2seconds(30);
  console.log(result);
}

　　现在调用testResult函数

testResult();

　　打开控制台，2s之后，输出了60.

　　现在我们看看代码的执行过程，调用testResult函数，它里面遇到了await, await表示等一下，代码就暂停到这里，不再向下执行了，它等什么呢？等后面的promise对象执行完毕，然后拿到promise resolve的值并进行返回，返回值拿到之后，它继续向下执行。具体到我们的代码,遇到await之后，代码就暂停执行了，等待doubleAfter2seconds(30) 执行完毕，doubleAfter2seconds(30)返回的promise开始执行，2秒之后，promise resolve了，并返回了值为60，这时await才拿到返回值60，然后赋值给result，暂停结束，代码才开始继续执行，执行 console.log语句。

　　就这一个函数，我们可能看不出async/await的作用，如果我们要计算3个数的值，然后把得到的值进行输出呢？

async function testResult() {
  let first = await doubleAfter2seconds(30);
  let second = await doubleAfter2seconds(50);
  let third = await doubleAfter2seconds(30);
  console.log(first + second + third);
}

　　6秒后，控制台输出220,我们可以看到，写异步代码就像写同步代码一样了，再也没有回调地域了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JavaScript中的await/async的作用和用法

await/async 是 ES7 最重要特性之一,它是目前为止 JS 最佳的异步解决方案了.虽然没有在 ES2016 中录入,但很快就到来,目前已经在 ES-Next Stage 4 阶段. 直接上例子,比如我们需要按顺序获取:产品数据=>用户数据=>评论数据老朋友 Ajax 传统的写法,无需解释 // 获取产品数据 ajax('products.json', (products) => { console.log('AJAX/products >>>', JSON
详解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 因为执可以被暂停.唯
深入理解JavaScript的async/await

async 和 await 在干什么任意一个名称都是有意义的,先从字面意思来理解.async 是"异步"的简写,而 await 的意思是等待.所以应该很好理解 async 用于申明一个 function 是异步的,而 await 等待某个操作完成. 那么async/await到底是干嘛的呢?我们先来简单介绍一下. async/await 是一种编写异步代码的新方法.之前异步代码的方案是回调和 promise. async/await 是建立在 promise 的基础上.(对promi
async/await与promise（nodejs中的异步操作问题）

举例写文章详情页面的时候的一个场景:首先更改文章详情中的 PV,然后读取文章详情,然后根据文章详情中文章 Id 查阅该文章评论和该文章作者信息.获取全部数据之后渲染文章详情页.数据库操作都是异步的,最直接想到的办法就是一层一层的回调函数,问题出来了:十分不雅观,要是层再多一点还会有更多麻烦.怎么解决?业内为了处理异步操作问题也是拼了,什么async,q,bluebird,co,处理方式不同,各有千秋,感兴趣可以了解一下,但是惊喜的发现nodejs 7.6已经默认支持ES7中的 async/awa
在JS循环中使用async/await的方法

async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案.目前,async / await这个特性已经是stage 3的建议,可以看看TC39的进度,本篇文章将分享在JS循环中使用async/await的方法. 在开发maty.js时,遇到一个数组任务,数组项是内部异步执行的函数,期望是同步依次执行每项函数,每项函数执行完本身的异步任务后,继续下一项. 刚开始单纯使用map来循环执行,并且await每项函数.如下所示: starters.map(async (fn,
JS为什么说async/await是generator的语法糖详解

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

场景远古时代我们在编写express后台,经常要有许多异步IO的处理.在远古时代,我们都是用chunk函数处理,也就是我们最熟悉的那种默认第一个参数是error的函数.我们来模拟一个Mongo数据库的操作,感受一下. mongoDb.open(function(err, db){ if(!err){ db.collection("users", function(err, collection){ if(!err){ let person = {name: "yika&q
Js中async/await的执行顺序详解

前言虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await(如果对async/await不熟悉可以先看下这篇文章)后拓展了一下,我理了一下await之后js的执行顺序,希望可以给别人解疑答惑,先简单介绍一下async/await. async/await 是一种编写异步代码的新方法.之前异步代码的方案是回调和 promise. async/await 是建立在 promise 的基础上
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 async/await原理及实例解析

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

目录一.简介二.async 三.await 四.案例附-直接量/字面量一.简介 async/await是ES20717引入的,主要是简化Promise调用操作,实现了以异步操作像同步的方式去执行,async外部是异步执行的,同步是await的作用. 二.async async,英文意思是异步,当函数(包括函数语句.函数表达式.Lambda表达式)前有async关键字的时候,并且该函数有返回值,函数执行成功,那么该函数就会调用Promise.resove()并隐式的返回一个Promise对
Pandas数据离散化原理及实例解析

这篇文章主要介绍了Pandas数据离散化原理及实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下为什么要离散化连续属性离散化的目的是为了简化数据结构,数据离散化技术可以用来减少给定连续属性值的个数.离散化方法经常作为数据挖掘的工具扔掉一些信息,可以让模型更健壮,泛化能力更强什么是数据的离散化连续属性的离散化就是在连续属性的值域上,将值域划分为若干个离散的区间,最后用不同的符号或整数值代表落在每个子区间中的属性值分箱案例 1.
JavaScript 反射和属性赋值实例解析

这篇文章主要介绍了JavaScript 反射和属性赋值实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Java和.NET都有着比较完善的反射机制,用来处理未知的对象并获取它们的属性和方法.JavaScript虽然没有完善的反射体系,但在编程的时候还是可以通过代码设计来实现类似反射的基本功能. function Antzone(){ this.webName="蚂蚁部落"; this.age=6; } Antzone.proto
java阻塞队列实现原理及实例解析

这篇文章主要介绍了java阻塞队列实现原理及实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下阻塞队列与普通队列的不同在于.当队列是空的时候,从队列中获取元素的操作将会被阻塞,或者当队列满时,往队列里面添加元素将会被阻塞.试图从空的阻塞队列中获取元素的线程将会被阻塞,直到其他的线程往空的队列插入新的元素.同样,试图往已满的阻塞队列中添加新元素的线程同样也会被阻塞,直到其他的线程使队列重新变得空闲起来,如从队列中移除一个或者多个元素,或者完
Java HashMap原理及实例解析

这篇文章主要介绍了Java HashMap原理及实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下示例 1 : HashMap的键值对 HashMap储存数据的方式是-- 键值对 package collection; import java.util.HashMap; public class TestCollection { public static void main(String[] args) { HashMap<String
Python assert关键字原理及实例解析

这篇文章主要介绍了Python assert关键字原理及实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Python assert(断言)用于判断一个表达式,在表达式条件为 False 的时候触发异常. 断言可以在条件不满足程序运行的情况下直接返回错误,而不必等待程序运行后出现崩溃的情况. 语法格式: assert expression 等价于: if not expression: raise AssertionError asser
Java内存模型原子性原理及实例解析

这篇文章主要介绍了Java内存模型原子性原理及实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下本文就具体来讲讲JMM是如何保证共享变量访问的原子性的. 原子性问题原子性是指:一个或多个操作,要么全部执行且在执行过程中不被任何因素打断,要么全部不执行. 下面就是一段会出现原子性问题的代码: public class AtomicProblem { private static Logger logger = LoggerFactory.
Java原子变量类原理及实例解析

这篇文章主要介绍了Java原子变量类原理及实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下一.原子变量类简介为何需要原子变量类保证线程安全是 Java 并发编程必须要解决的重要问题.Java 从原子性.可见性.有序性这三大特性入手,确保多线程的数据一致性. 确保线程安全最常见的做法是利用锁机制(Lock.sychronized)来对共享数据做互斥同步,这样在同一个时刻,只有一个线程可以执行某个方法或者某个代码块,那么操作必然是原子性
python匿名函数lambda原理及实例解析

这篇文章主要介绍了python匿名函数lambda原理及实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 #-*- coding:utf-8 -*- #__author__ = "www.iplaypy.com" # 普通python函数 def func(a,b,c): return a+b+c print func(1,2,3) # 返回值为6 # lambda匿名函数 f = lambda a,b,c:a+b+c

JavaScript async/await原理及实例解析

相关推荐

随机推荐