JS异步堆栈追踪之为什么await胜过Promise

概述

async/await和Promise的根本区别在于await fn()暂停当前函数的执行，而promise.then(fn)在将fn调用添加到回调链后，继续执行当前函数。

const fn = () => console.log('hello')
const a = async () => {
  await fn() // 暂停 fn 的执行
}
// 调用 a 时，才恢复 fn 的执行
a() // "hello"

const promise = Promise.resolve()
// 将 fn 添加到回调链后，继续执行 fn
promise.then(fn) // "hello"

在堆栈追踪的上下文中，这种差异非常显著。

当一个Promise链（无论是否脱糖化）在任何时候抛出一个未经处理的异常时，JavaScript引擎都会显示一条错误信息和（希望）记录一个有用的堆栈追踪。

作为一名开发人员，无论您使用的是普通的Promise还是async await，您都会期望这样。

Promise

想象一个场景，当对异步函数b的调用解析时，调用函数c：

const b = () => Promise.resolve()
const a = () => {
    b().then(() => c())
}

当调用a时，将同步发生以下情况：

  • b被调用并返回一个Promise，该Promise将在将来某个时刻解决。
  • .then回调（实际上是调用c()）被添加到回调链中（ V8 术语中，[…]被添加为解析处理程序）。

之后，我们完成了在函数a的主体中执行代码。a永远不会被挂起，当对b的异步调用解析时，上下文已经消失了。

想象一下如果b（或c）异步抛出异常会发生什么？理想情况下，堆栈追踪应该包括a，因为b（或c）是从那里调用的，对吧？既然我们不在参考a了 ，那怎样能做到呢？

为了让它工作，JavaScript 引擎需要在上面的步骤之外做一些事情：它在有机会的时候捕获并存储堆栈追踪。

在V8中，堆栈追踪附加到b返回的Promise。当Promise实现时，堆栈追踪将被传递，以便c可以根据需要使用它。

b()[a] -> b().then()[a] -> c[a?:a]

捕获堆栈追踪需要时间（即降低性能）；存储这些堆栈追踪需要内存。

async/await

下面是同样的程序，使用async/await而不是Promise编写：

const b = () => Promise.resolve()
const a = async () => {
  await b()
  c()
}

使用await，即使在await调用中不收集堆栈追踪，我们也可以恢复调用链。

这是可能的，因为a被挂起，正在等待b解决。如果b抛出异常，则可以按需以这种方式重建堆栈追踪。

如果c抛出异常，堆栈追踪可以像同步函数那样构造，因为发生这种情况时，我们仍在a上下文中。

通过遵循以下建议，使 JavaScript 引擎能够以更高效的方式处理堆栈追踪：

  • 偏好async/await胜过Promise。
  • 使用 @babel/preset env避免不必要的async/await传输。

以上就是JS异步堆栈追踪之为什么await胜过Promise的详细内容，更多关于Javascript的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Javascript异步编程之你真的懂Promise吗

    Javascript异步编程之你真的懂Promise吗

    前言 在异步编程中,Promise 扮演了举足轻重的角色,比传统的解决方案(回调函数和事件)更合理和更强大.可能有些小伙伴会有这样的疑问:2020年了,怎么还在谈论Promise?事实上,有些朋友对于这个几乎每天都在打交道的"老朋友",貌似全懂,但稍加深入就可能疑问百出,本文带大家深入理解这个熟悉的陌生人-- Promise. 基本用法 语法 new Promise( function(resolve, reject) {...} /* executor */ ) 构建 Promise

  • async/await与promise（nodejs中的异步操作问题）

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

  • 如何在现代JavaScript中编写异步任务

    前言 在本文中,我们将探讨过去异步执行的 JavaScript 的演变,以及它是怎样改变我们编写代码的方式的.我们将从最早的 Web 开发开始,一直到现代异步模式. 作为编程语言, JavaScript 有两个主要特征,这两个特征对于理解我们的代码如何工作非常重要.首先是它的同步特性,这意味着代码将逐行运行,其次是单线程,任何时候都仅执行一个命令. 随着语言的发展,允许异步执行的新工件出现在场景中.开发人员在解决更复杂的算法和数据流时尝试了不同的方法,从而导致新的接口和模式出现. 同步执行和观察

  • JS异步的执行原理和回调详解

    JS异步的执行原理和回调详解

    一.JS异步的执行原理   我们知道JavaScript是单线程的,而浏览器是多线程的.单线程执行任务需要一个个排队进行,假如一个任务需要很长时间执行(像ajax需要较长时间),会直接导致无响应,后面的任务一直在等待执行.这时候就需要用到异步.   想了解异步,首先我们要知道浏览器有最基本的三个常驻线程: JS引擎线程,事件触发线程,GUI渲染线程.   其中JS引擎线程和事件触发线程共同构成了一种事件循环机制,而GUI渲染线程与JS引擎是互斥的,当JS引擎执行时GUI线程会被挂起,GUI更新保

  • 详解JavaScript Promise和Async/Await

    详解JavaScript Promise和Async/Await

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

  • JS异步宏队列与微队列原理区别详解

    1. 原理图 2. 说明 JS 中用来存储待执行回调函数的队列包含 2 个不同特定的列队 宏列队:用来保存待执行的宏任务(回调),比如:定时器回调.DOM 事件回调.ajax 回调 微列队:用来保存待执行的微任务(回调),比如:promise的回调.MutationObserver 的回调 JS 执行时会区别这 2 个队列 JS 引擎首先必须先执行所有的初始化同步任务代码 每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出来执行,也就是优先级比宏任务高,且与微任务所处的代码位置无关

  • 详解JavaScript 异步编程

    异步的概念 异步(Asynchronous, async)是与同步(Synchronous, sync)相对的概念. 在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序列中按顺序执行).而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系. 简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效果更高: 以上是关于异步的概念的解释,接下来我们通俗地解释一下异步:异步就是从主线程发射一

  • 实例分析javascript中的异步

    js 异步解析 一 .js单线程分析 我们都知道js的一大特点是单线程,也就是同一时间点,只能处理一件事,一句js代码.那为什么js要设计成单线程而不是多线程呢?这主要和js的用途有关,js作为浏览器端的脚本语言,主要的用途为用户与服务端的交互与操作dom.而操作dom就注定了js只能是单线程语言.假如js才取多线程将会出现,多个线程同时对一个dom进行操作的情况,浏览器将无法判断如何渲染.不仅js是单线程,浏览器渲染dom也是单线程的,js的执行和浏览器渲染dom共用的一个线程,这就导致了在h

  • JavaScript异步编程之Promise的初步使用详解

    1. 概述 Promise对象是ES6提出的的异步编程的规范.说到异步编程,就不得不说说同步和异步这两个概念. 从字面意思理解同步编程的话,似乎指的是两个任务同步运行,如果这样理解就错了(至少笔者再没有接触到这个概念的时候有这种误解).同步和异步指的是代码指定执行的顺序(结构化编程范式的执行顺序总是由上至下,由前往后的),如果执行的顺序与代码的相同,就是同步:如果不同,就是异步. 最初,操作系统都是基于命令行的,所有的的语言设计出来也天然是同步的语句,在这种情况下,也不需要异步编程.但是很快,图

  • JS异步堆栈追踪之为什么await胜过Promise

    概述 async/await和Promise的根本区别在于await fn()暂停当前函数的执行,而promise.then(fn)在将fn调用添加到回调链后,继续执行当前函数. const fn = () => console.log('hello') const a = async () => { await fn() // 暂停 fn 的执行 } // 调用 a 时,才恢复 fn 的执行 a() // "hello" const promise = Promise.r

  • JS基于ES6新特性async await进行异步处理操作示例

    JS基于ES6新特性async await进行异步处理操作示例

    本文实例讲述了JS基于ES6新特性async await进行异步处理操作.分享给大家供大家参考,具体如下: 我们往往在项目中会遇到这样的业务需求,就是首先先进行一个ajax请求,然后再进行下一个ajax请求,而下一个请求需要使用上一个请求得到的数据,请求少了还好说,如果多了,就要一层一层的嵌套,就好像有点callback的写法了,那是相当恶心的,下面我就来讲一下如何使用ES6的新特性async await进行异步处理,使上述情况就好像写同步代码一样,首先我们先举个例子: 先写上json文件: c

  • js异步之async和await实现同步写法

    首先我们假设有一方法 readFile 可以读取文件内容,  但是它是异步的. var gen = function* (){     var a = yield readFile('./a.txt');     console.log(a.toString());     var b = yield readFile('./b.txt');     console.log(b.toString()); }; 首先我们看下上面的代码,如果我们将function 后面的 * 改成 async,将y

  • Node.js 异步编程之 Callback介绍（一）

    Node.js 基于 JavaScript 引擎 v8,是单线程的.Node.js 采用了与通常 Web 上的 JavaScript 异步编程的方式来处理会造成阻塞的I/O操作.在 Node.js 中读取文件.访问数据库.网络请求等等都有可能是异步的.对于 Node.js 新人或者从其他语言背景迁移到 Node.js 上的开发者来说,异步编程是比较痛苦的一部分.本章将由浅入深为大家讲解 Node.js 异步编程的方方面面.从最基础的 callback 到 thunk.Promise.co 直到

  • JavaScript错误处理和堆栈追踪详解

    有时我们会忽略错误处理和堆栈追踪的一些细节, 但是这些细节对于写与测试或错误处理相关的库来说是非常有用的. 例如这周, 对于 Chai 就有一个非常棒的PR, 该PR极大地改善了我们处理堆栈的方式, 当用户的断言失败的时候, 我们会给予更多的提示信息(帮助用户进行定位). 合理地处理堆栈信息能使你清除无用的数据, 而只专注于有用的数据. 同时, 当更好地理解 Errors 对象及其相关属性之后, 能有助于你更充分地利用 Errors. (函数的)调用栈是怎么工作的 在谈论错误之前, 先要了解下(

  • 详解Node.js异步处理的各种写法

    异步的"坑" 最近一段时间参与开发了一个Node.js后台项目,作为一个PHP开发者,上手项目本身并不难,但是开发的过程却并不顺利,不顺利的主要原因在于思路上没有转变,没有从 同步 的思维转换到 异步 的思维. 所谓 同步 ,就是程序(线程)在一个任务的处理过程中,不会插入处理其他任务,即使遇到IO等不占CPU的操作,也会一直等待其结束才会继续往下处理. 所谓 异步 ,就是程序(线程)在一个任务的处理过程中,会插入处理其他任务,如遇到IO操作,当前任务会将程序(线程)的控制权释放给其他

  • JS异步执行结果获取的3种解决方式

    前言 JS异步执行机制具有非常重要的地位,尤其体现在回调函数和事件等方面. 但异步有时候很方便,有时候却很让人恼火,下面来总结一下异步执行结果获取的方法 回调 这是最传统的方法了,也是最简单的,如下代码 function foo(cb) { setTimeout(function() { cb(1); // 通过参数把结果返回 }, 2000); } foo(function(result) { // 调用foo方法的时候,通过回调把方法返回的数据取出来 console.log(result);

  • JS异步代码单元测试之神奇的Promise

    前言 写这篇文章的起因是在写单元测试时,做形如下测试时 new Promise((resolve, reject) => reject(1)).then().catch(err => { console.log(err) }) async function jestTest () { await Promise.resolve().then() console.log('这个时候catch预期已经被调用,且输出日志') } jestTest() 无法使用await将测试代码恰好阻塞到catch

  • 浅析JS异步加载进度条

    浅析JS异步加载进度条

    展现效果: 1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现. 实现思路: 1.当用户点击load button执行异步请求. 调用方法 出现加载条 2.怎么实现进度条呢? 1) 在document.body 新增一个div.覆盖浏览器. 设置背景会灰色. z-index = 999. 加载的时候让用户无法修改界面值 2) 在document.body 新增一个动态的div. 代码实现: Main.html: <!DOCTYPE html> <html>

  • vue.js异步上传文件前后端实现代码

    本文实例为大家分享了vue.js异步上传文件的具体代码,供大家参考,具体内容如下 上传文件前端代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8&qu

随机推荐