>

美洲杯在线投注_2019美洲杯外围投注[投注官网]

热门关键词: 美洲杯在线投注,2019美洲杯外围投注[投注官网]

精读《async/await 是把双刃剑》

- 编辑:美洲杯在线投注 -

精读《async/await 是把双刃剑》

精读《async/await 是把双刃剑》

2018/05/12 · JavaScript · 1 评论 · async, await

原文出处: 黄子毅   

本周精读内容是 《逃离 async/await 地狱》

JavaScript Promise 迷你书(中文版)

超详细介绍promise的gitbook,看完再不会promise......

本书的目的是以目前还在制定中的ECMAScript 6 Promises规范为中心,着重向各位读者介绍JavaScript中对Promise相关技术的支持情况。

通过阅读本书,我们希望各位读者能在下面三个目标上有所收获。

学习Promise相关内容,能熟练使用Promise模式并进行测试

学习Promise适合什么、不适合什么,知道Promise不是万能的,不能什么都想用Promise来解决

以ES6 Promises为基础进行学习,逐渐发展形成自己的风格

重温 ES6 核心概念和基本用法


ES6 在 2015 年 6 月就得以批准,至今已两年了。近一年多以来陆续看过很多 ES6 的资料,工作项目中也逐步的用上了很多 ES6 的特性(let,const,promise,Template strings,Class, 箭头函数等等),不得不说,这些特性给开发带来了非常的的便利。但是我的 ES6 知识其实并不够系统,这也是本文的成因,希望阅读本文能让你也能对 ES6 有更系统的理解,本文并不是那种大而全的教程,而是希望在实际工作中,能想起某个新特性可以解决你当前的问题或者优化当前的代码,然后再系统学习,应用,毕竟自己用过了才算掌握了。

解决怎么拿到 JavaScript 异步函数的返回值?


上面所有的例子,在最新 chrome 上都可以运行。一个个小例子,点了点几个名词。当然也只是 “点” 而已,如果能提供读者深入学习相关知识点的一个 trigger,那么老姚就心满意足了。

Exploring ES6 的翻译文档 [由 GitHub 的 es6-org 维护]


很多人说,阮老师已经有一本关于 ES6 的书了 - 《ECMAScript 6 入门》,觉得看看这本书就足够了。
阮老师的那本书确实不错,值得 ES6 初学者去阅读。但是阮老师对这本书的定位是“中级难度”,也就是说书中不会很深入地去剖析各个知识点,而《 Exploring ES6 》这本书就努力在向大家细致地深入地讲解 ES6 的方方面面,这也是我觉得这本书很不错的原因。

总结 ES6 常用的新特性


ES6 是即将到来的新版本 JavaScript 语言的标准,他给我们带来了更” 甜” 的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数(=>)、class 等等。

工作中,ES6 可能掌握这些就足够了


工作中总结了一点点儿关于 ES6 常用的小知识。欢迎大家来一起探讨一起学习。

前端的异步解决方案之 Promise 和 Await/Async


异步编程模式在前端开发过程中,显得越来越重要。从最开始的 XHR 到封装后的 Ajax 都在试图解决异步编程过程中的问题。随着 ES6 新标准的出来,处理异步数据流的解决方案又有了新的变化。Promise 就是这其中的一个。我们都知道,在传统的 ajax 请求中,当异步请求之间的数据存在依赖关系的时候,就可能产生很难看的多层回调,俗称” 回调地狱”(callback hell)。另一方面,往往错误处理的代码和正常的业务代码耦合在一起,造成代码会极其难看。为了让编程更美好,我们就需要引入 promise 来降低异步编程的复杂性。

30 分钟掌握 ES6/ES2015 核心内容


我刚刚花了一个小时把作者的文章全都试了一遍,现在分享出来,希望对大家有所帮助。

玩转 Promise,随心所欲控制异步操作


在 es6 中,Promise 的使用显得尤为重要,它以一种链式的表达方式来为工程师们展示一种新的异步操作。而真正掌握它后,就会在处理各种需要的异步操作就更加得心应手,如网络请求,连续的异步操作以及错误的处理等......

Promise 必知必会(十道题)


Promise 想必大家都十分熟悉,想想就那么几个 api,可是你真的了解 Promise 吗?本文根据 Promise 的一些知识点总结了十道题,看看你能做对几道。 以下 promise 均指代 Promise 实例,环境是 Node.js。 解释:Promise 构造函数是…

「大概可能也许是」目前最好的 JavaScript 异步方案 async/await


ES7 完美解决异步回调

JavaScript Promise 探微


我在 JavaScript 中使用 Promise 已经有一段时间了,目前我已经能高效的使用这一开始让我晕头转向的东西。但真要细说起来,我发现还是不能完全理解它的实现原理,这也正是本文写作的目的所在。如果诸位读者也处在一知半解的状态,那请读完这篇文章,相信你也会像我一样对 Promise 有更好的理解。

写一个符合 Promises/A 规范并可配合 ES7 async/await 使用的 Promise


写一个符合 Promises/A 规范并可配合 ES7 async/await 使用的 Promise

理解 Promise 的工作原理


Javascript 采用回调函数(callback)来处理异步编程。从同步编程到异步回调编程有一个适应的过程,但是如果出现多层回调嵌套,也就是我们常说的厄运的回调金字塔(Pyramid of Doom),绝对是一种糟糕的编程体验。于是便有了 CommonJS 的 Promises/A 规范,用于解决回调金字塔问题。本文先介绍 Promises 相关规范,然后再通过解读一个迷你的 Promises 以加深理解。

实例感受-es6的常用语法和优越性


前几天,用es6的语法重写了我的一个代码库,说是重写,其实改动的并不多,工作量不大。在重写完了的时候,就个人总结了一下es6常用的一些常用的语法和比es5优越的方面。下面提到的语法可能也就是es6新特性的10%-20%,但是开发上占了80%左右的。下面的文章,按照es6常用新特…

理解 Promise 简单实现的背后原理


在写 javascript 时我们往往离不开异步操作,过去我们往往通过回调函数多层嵌套来解决后一个异步操作依赖前一个异步操作,然后为了解决回调地域的痛点,出现了一些解决方案比如事件订阅/发布的、事件监听的方式,再后来出现了 Promise、Generator、async/await 等的异步解决方案。co 模块使用了 Promise 自动执行 Generator,async/await 这个 Node7.6 开始默认支持的最新解决方案也是依赖于 Promise, 所以了解 Promise 是非常有必要的,而理解它背后的实现原理则能在使用它的时候更加游刃有余。

理解 async/await


ES7 提出的async 函数,终于让 JavaScript 对于异步操作有了终极解决方案。No more callback hell。 async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示,在函数内部使用 await 来表示异步。 想较于 Ge…

[深入 Promise(一)——Promise 实现详解

1 引言

终于,async/await 也被吐槽了。Aditya Agarwal 认为 async/await 语法让我们陷入了新的麻烦之中。

其实,笔者也早就觉得哪儿不对劲了,终于有个人把实话说了出来,async/await 可能会带来麻烦。

](https://juejin.im/entry/58a10aa61b69e60059d1d2af)

深度好文呐!详细的阐述 Promise 的原理和实现。赞!

回调地狱的今生前世 @JavaScript


快来这里系统的了解一下 JavaScript 的异步编程吧:回调、promise、Generator、await/async

JavaScript 异步编程魔法


在单线程执行的 JavaScript 中,异步最著名的是 Ajax, 但是你仅仅知道这些吗?

Promise 异步流程控制


然而能全部答上的很少,能够给出一个回调 计数版本的,我都觉得合格了。那么接下来就一起来学习总结一下基于 Promise 来处理异步的三种方法。 最简单的,就是将异步一个个来处理,转为一个类似同步的方式来处理。 先来简单的实现一个单个 Image 来加载的 thenable …

ES6 你可能不知道的事 - 基础篇


ES6 你可能不知道的事 - 基础篇

JavaScript 进阶之路——认识和使用 Promise,重构你的 Js 代码


Promise 可能大家都不陌生,因为 Promise 规范已经出来好一段时间了,同时 Promise 也已经纳入了 ES6,而且高版本的 chrome、firefox 浏览器都已经原生实现了 Promise,只不过和现如今流行的类 Promise 类库相比少些 API。

深刻理解 ES 6 中的 Promise


Why Promise

ES6 变量声明与赋值:值传递、浅拷贝与深拷贝详解


ES6 变量声明与赋值:值传递、浅拷贝与深拷贝详解归纳于笔者的现代 JavaScript 开发:语法基础与实践技巧系列文章。本文首先介绍 ES6 中常用的三种变量声明方式,然后讨论了 JavaScript 按值传递的特性,最后介绍了复合类型拷贝的技巧;有兴趣的可以阅读下一章节 …

ES6系列文章 异步神器async-await


关于异步处理,ES5的回调使我们陷入地狱,ES6的Promise使我们脱离魔障,终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。
经常会看到有了 async-await、promise 还有必要学习吗、async await优于pr…

手写一款 Promise


Promise 对象是用来处理异步操作的工具, 解决开发者对异步回调的烦恼。可以说 Promise 是个代理对象,在设计模式来讲就是代理模式,它代理了一个值(通过 resolve 方法传递的值),并且设置了几个状态让用户知道当前代理值解析的结果。而笔者此次按照 Promise/A+ 的规范要求,自己尝试做了一款简化版的 Promise。

ES6常用知识点概述


ES6,并不是一个新鲜的东西,ES7、ES8已经赶脚了。但是,东西不在于新,而在于总结。每个学前端的人,身边也必定有本阮老师的《ES6标准入门》或者翻译的《深入理解ECMAScript6》。本篇主要是对ES6的一些常用知识点进行一个总结。如果你喜欢我的文章,欢迎评论,欢迎Sta…

《深入理解ES6》中的代码片段,你能猜对几个?


花了3个周末看完了《深入理解ES6》,其中有许多代码段以及文字描述和我“常识”有些出入,因此记录了下来并加以验证。 有些代码段还是蛮有趣的,在此分享下。正在阅读屏幕的你,能“猜”对几个代码片段呢? 每个代码片段均有编号,格式为为try-xxx-yyy或note-xxx-yyy,其…

Promise--优雅解决回调嵌套


利用 Promise 优雅解决回调嵌套,让代码更加移动,可维护性更好

ES6 你可能不知道的事 - 进阶篇


模块化是个进行了很久的话题,发展历程中出现过很多模式,例如 AMD, CommonJS 等等。

Module 是 ES6 的新特性,是语言层面对模块化的支持。

我所知道的 JavaScript 异步编程


没有搞定异步编程的 JS 开发者不是称职的开发者。

入门 JS 算是一年了,从当时直接使用回调到后来开始大量使用 async 库,期间冒出的 promise、generator 都完全没有去管它。然后然后最近就被鄙视了一番 (哭泣。。。。)。

三年内前端新人需要掌握的ES6知识-视频教程


ES6已经在工作中全面使用,作为一个前端,你需要掌握文章中的这些知识,并带上了视频教程,希望可以帮助更多的小伙伴。

八段代码彻底掌握 Promise


1.Promise的立即执行性 var p = new Promise(function(resolve, reject){ console.log("create a promise"); resolve("success"); }); console.log("after n…

深入理解 ES7 的 async/await


async/await 可以说是 ES7 加入的解决 js 异步的终极武器,虽然 ES7 到目前为止还未发布,但是幸好,最新的 nodejs 已支持该特性,让我们试试这个武器的威力吧

深入理解 Promise (下)


经过几天源码研究学习之后,基本上对 Promise 有了深入的了解,也手动封装了自己了 Promise 工具类,下面就是我们去在应用场景中去验证这个工具类的使用了

也许是史上最全的前端资源大汇总


最近有很多朋友问有没有相关的书籍推荐,希望能够自学一下前端。这里列出了学习前端所需要的,几乎所有的知识,分享给大家。

Promise 之深度解析


深度解析 Promise 的知识点。

Async/Await 替代 Promise 的 6 个理由


Node.js 的异步编程方式有效提高了应用性能;然而回调地狱却让人望而生畏,Promise 让我们告别回调函数,写出更优雅的异步代码;在实践过程中,却发现 Promise 并不完美;技术进步是无止境的,这时,我们有了 Async/Await。

异步与回调的设计哲学


本文的例子用 JavaScript 语法给出,希望读者至少有使用过 Promise 的经验,如果用过 async/await 则更好,对于客户端的开发者,我相信语法不是阅读的瓶颈,思维才是,因此也可以了解一下异步编程模型的演变过程。 异步编程入门 CPS CPS 的全称是 (C…

深入理解 Promise (中)


经过上一篇 深入理解 Promise (上) 的理论知识和用法学习,这一篇让我们深入源码层面,一步一步去封装一个 Promise,去了解 Promise 的内部实现,以便我们在项目中对 Promise 的使用运用自如。

30 分钟搞定 ES6 常用基础知识


ES6 常用基础知识划重点。明确学习方向。

快速将 Promise 运用在开发中


这篇文章面向对 Promise 不甚了解的朋友,我将告诉你如何把它快速运用在开发中。 什么是 Promise? 简单几句介绍一下。Promise 是抽象异步处理对象以及对其进行各种操作的组件。你可以理解为:它的出现,是为了让我们更方便的进行异步处理。 在 Promise 出现之前,说到 Ja…

深入理解 Promise (上)


自从 ES6 流行起来,Promise 的使用变得更频繁更广泛了,比如异步请求一般返回一个 Promise 对象,Generator 中 yield 后面一般跟 Promise 对象,ES7 中 Async 函数中 await 后面一般也是 Promise 对象,还有更多的 NodeAPI 也会返回 Promise 对象,可以说现在的编程中 Promise 的使用无处不在,那么我们是否真的弄懂了 Promise 呢?是否有误用或错误使用 Promise 呢?是否知道 Promise 的实现原理和 Promise 的花样玩法呢?下面让我们一起来探讨一下吧。

精通 Javascript 中的 Promise


精通 Javascript 中的 Promise

深入理解 JavaScript 异步


什么是异步,异步的实现原理,event-loop,以及和事件绑定的关系。

exports、module.exports 和 export、export default 到底是咋回事


前言 难得有空,今天开始重新规范的学习一下node编程。 但是引入模块我看到用 require的方式,再联想到咱们的ES6各种export 、export default。 阿西吧,头都大了.... 头大完了,那我们坐下先理理他们的使用范围。 require: node 和 es…

JavaScript 初学者必看 “箭头函数”


译者按: 箭头函数看上去只是语法的变动,其实也影响了 this 的作用域。 原文: JavaScript: Arrow Functions for Beginners 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。 本文…

彻底理解 Javascript 中的 Promise


彻底理解 Javascript 中的 Promise

2 概述

下面是随处可见的现代化前端代码:

(async () => { const pizzaData = await getPizzaData(); // async call const drinkData = await getDrinkData(); // async call const chosenPizza = choosePizza(); // sync call const chosenDrink = chooseDrink(); // sync call await addPizzaToCart(chosenPizza); // async call await addDrinkToCart(chosenDrink); // async call orderItems(); // async call })();

1
2
3
4
5
6
7
8
9
(async () => {
  const pizzaData = await getPizzaData(); // async call
  const drinkData = await getDrinkData(); // async call
  const chosenPizza = choosePizza(); // sync call
  const chosenDrink = chooseDrink(); // sync call
  await addPizzaToCart(chosenPizza); // async call
  await addDrinkToCart(chosenDrink); // async call
  orderItems(); // async call
})();

await 语法本身没有问题,有时候可能是使用者用错了。当 pizzaData 与 drinkData 之间没有依赖时,顺序的 await 会最多让执行时间增加一倍的 getPizzaData 函数时间,因为 getPizzaData 与 getDrinkData 应该并行执行。

回到我们吐槽的回调地狱,虽然代码比较丑,带起码两行回调代码并不会带来阻塞。

看来语法的简化,带来了性能问题,而且直接影响到用户体验,是不是值得我们反思一下?

正确的做法应该是先同时执行函数,再 await 返回值,这样可以并行执行异步函数:

(async () => { const pizzaPromise = selectPizza(); const drinkPromise = selectDrink(); await pizzaPromise; await drinkPromise; orderItems(); // async call })();

1
2
3
4
5
6
7
(async () => {
  const pizzaPromise = selectPizza();
  const drinkPromise = selectDrink();
  await pizzaPromise;
  await drinkPromise;
  orderItems(); // async call
})();

或者使用 Promise.all 可以让代码更可读:

(async () => { Promise.all([selectPizza(), selectDrink()]).then(orderItems); // async call })();

1
2
3
(async () => {
  Promise.all([selectPizza(), selectDrink()]).then(orderItems); // async call
})();

看来不要随意的 await,它很可能让你代码性能降低。

3 精读

仔细思考为什么 async/await 会被滥用,笔者认为是它的功能比较反直觉导致的。

首先 async/await 真的是语法糖,功能也仅是让代码写的舒服一些。先不看它的语法或者特性,仅从语法糖三个字,就能看出它一定是局限了某些能力。

举个例子,我们利用 html 标签封装了一个组件,带来了便利性的同时,其功能一定是 html 的子集。又比如,某个轮子哥觉得某个组件 api 太复杂,于是基于它封装了一个语法糖,我们多半可以认为这个便捷性是牺牲了部分功能换来的。

功能完整度与使用便利度一直是相互博弈的,很多框架思想的不同开源版本,几乎都是把功能完整度与便利度按照不同比例混合的结果。

那么回到 async/await 它的解决的问题是回调地狱带来的灾难:

a(() => { b(() => { c(); }); });

1
2
3
4
5
a(() => {
  b(() => {
    c();
  });
});

为了减少嵌套结构太多对大脑造成的冲击,async/await 决定这么写:

await a(); await b(); await c();

1
2
3
await a();
await b();
await c();

虽然层级上一致了,但逻辑上还是嵌套关系,这不是另一个程度上增加了大脑负担吗?而且这个转换还是隐形的,所以许多时候,我们倾向于忽略它,所以造成了语法糖的滥用。

本文由计算机教程发布,转载请注明来源:精读《async/await 是把双刃剑》