https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

http://www.ruanyifeng.com/blog/2015/04/generator.html

https://blog.oyanglul.us/javascript/functional-javascript.html#sec-2-2

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function

http://es6.ruanyifeng.com/#docs/async

  普通函数嵌套,多层异步嵌套,加上错误处理,代码很乱,不好看。

  然后迎来了Promise和generator,promise中执行异步逻辑,然后执行reject或者resolve来改变promise的状态,接着promise外通过then或catch注册的回调函数就会执行,相比普通的函数嵌套,这里就相当于把结果处理的函数放到了外面,从而减少了嵌套的层数。回调函数中也可以返回promise,这样外面then返回的promise的状态就会跟随里面的promise,也就是说里面的promise的处理也可以放到最外面去,也可以减少嵌套的层数,看上去就很像同步函数了。

  接着generator也可以配合promise来使用,它可以实现一些类似于状态机的效果,generator内部yield多个值,外部通过next来控制内部代码段的执行。用它还可以实现一些无限长的序列。除此之外它还有一些比较灵活的自动执行方面的技巧(co库),涉及到函数式编程、柯里化之类的概念。

  最后,终极的解决方案就是ES7里面的async函数。是generator的升级版,generator需要调用next,代码才会往下执行,但async函数自带执行器,内部的代码会自动往下执行,很方便。自动执行的原理:http://es6.ruanyifeng.com/#docs/async#async-函数的实现原理

  大概就是,把await全部变成yield,然后获取generator,执行一个函数如step,里面调用一次next,获取到第一个值,通过Promise.resolve转为一个promise,然后再上面用then注册回调方法,回调方法里继续调用step。递归调用

  

事件绑定和异步的对比

$btn.on('click', function (e) {
console.log('你点击了按钮')
})
fs.readFile('data1.json', function (err, data) {
// 获取数据
})

两者都是运行在事件循环中,但是回调函数的调用源不一样,异步的调用源是系统,而事件绑定须要通过用户去触发

自己实现一个Promise:https://github.com/geekinpink/GPromise

js 异步编程方案的更多相关文章

  1. JS魔法堂:深究JS异步编程模型

    前言  上周5在公司作了关于JS异步编程模型的技术分享,可能是内容太干的缘故吧,最后从大家的表情看出"这条粉肠到底在说啥?"的结果:(下面是PPT的讲义,具体的PPT和示例代码在h ...

  2. js异步编程

    前言 以一个煮饭的例子开始,例如有三件事,A是买菜.B是买肉.C是洗米,最终的结果是为了煮一餐饭.为了最后一餐饭,可以三件事一起做,也可以轮流做,也可能C需要最后做(等A.B做完),这三件事是相关的, ...

  3. 深究JS异步编程模型

    前言  上周5在公司作了关于JS异步编程模型的技术分享,可能是内容太干的缘故吧,最后从大家的表情看出"这条粉肠到底在说啥?"的结果:(下面是PPT的讲义,具体的PPT和示例代码在h ...

  4. node.js异步编程的几种模式

    Node.js异步编程的几种模式 以读取文件为例: 1.callback function const fs = require('fs'); //callback function fs.readF ...

  5. 前端分享----JS异步编程+ES6箭头函数

    前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...

  6. JS异步编程 (2) - Promise、Generator、async/await

    JS异步编程 (2) - Promise.Generator.async/await 上篇文章我们讲了下JS异步编程的相关知识,比如什么是异步,为什么要使用异步编程以及在浏览器中JS如何实现异步的.最 ...

  7. JS异步编程 (1)

    JS异步编程 (1) 1.1 什么叫异步 异步(async)是相对于同步(sync)而言的,很好理解. 同步就是一件事一件事的执行.只有前一个任务执行完毕,才能执行后一个任务.而异步比如: setTi ...

  8. node.js异步编程解决方案之Promise用法

    node.js异步编程解决方案之Promise var dbBase = require('../db/db_base'); var school_info_db = require('../db/s ...

  9. 一个例子读懂 JS 异步编程: Callback / Promise / Generator / Async

    JS异步编程实践理解 回顾JS异步编程方法的发展,主要有以下几种方式: Callback Promise Generator Async 需求 显示购物车商品列表的页面,用户可以勾选想要删除商品(单选 ...

随机推荐

  1. bzoj 2927: [Poi1999]多边形之战【博弈论】

    先手必胜状态是黑三角在边上 然后其他情况脑补一下,n为偶数先手必胜,可以理解为从某一边取,先手总有办法让后手取得一边有奇数个 #include<iostream> #include< ...

  2. the little schemer 笔记(0)

    the little schemer 笔记 Z.X.L 2012年08月13日 五项规则 car的规则car只对非空列表有定义. cdr的规则cdr只对非空列表有定义.任何非空列表的cdr是另外一个列 ...

  3. first-child和last-child选择器 nth-child(n)第几个元素 nth-last-child(n)倒数第几个元素

    :first-child 和  :last-child 分别表示父元素中第一个 或者  最后一个 子元素设置样式,如上图

  4. 水题 Codeforces Round #303 (Div. 2) D. Queue

    题目传送门 /* 比C还水... */ #include <cstdio> #include <algorithm> #include <cstring> #inc ...

  5. Tomcat启动后打开页面提示404错误的解决

    Eclipse配置并启动Tomcat成功,但有时会访问localhost:8080出现404错误,此时需要修改Tomcat配置.步骤如下: 在Eclipse中双击Tomcat server,打开Tom ...

  6. 转-eclipse管理多个workspace

    Eclipse作为Java开发中最常用的开发工具,大家都很熟悉了,但是,当你做过很多项目后你会发现你的eclipse的package explorer视图下显示的project超级多,这时你可能会关闭 ...

  7. Git命令---递归克隆

    git clone --recursive https://github.com/rbgirshick/fast-rcnn.git Git命令 --recursive 会递归克隆fast-rcnn项目 ...

  8. [已读]响应式web设计

    去年冲着响应式这三个字买的,很快就读完了,因为说实话都挺浅显的内容.真正涉及到响应式的是第二和第三章(媒体查询 em 百分比图片),其他的h5与css3关系不大.

  9. P2006 赵神牛的游戏

    题目描述 在DNF 中,赵神牛有一个缔造者,他一共有k点法力值,一共有m个技能,每个技能耗费的法力值为a[i],可以造成的伤害为b[i],而boss 的体力值为n,请你求出它放哪个技能,才可以打死bo ...

  10. EmitMapper系列之二:EmitMapper的使用小结

    EmitMapper的入门 EmitMapper引用 EmitMapper案例 最近公司开发项目前端使用一个js框架,后端使用ef,js前台读取的json采用实体的dto来进行生成. 在网上看到了Em ...