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 4199: [Noi2015]品酒大会【后缀数组+单调栈+并查集】

    用SA求出height数组,然后发现每个height值都有一个贡献区间(因为点对之间要依次取min) 用单调栈处理出区间,第一问就做完了 然后用并查集维护每个点的贡献(?),从大到小枚举height, ...

  2. TensorFlow图像预处理完整样例

    参考书 <TensorFlow:实战Google深度学习框架>(第2版) 以下TensorFlow程序完成了从图像片段截取,到图像大小调整再到图像翻转及色彩调整的整个图像预处理过程. #! ...

  3. profile和bashrc

    转自某不知名网友 /etc/profile,/etc/bashrc 是系统全局环境变量设定~/.profile,~/.bashrc用户家目录下的私有环境变量设定当登入系统时候获得一个shell进程时, ...

  4. C# BitmapData和Marshal.Copy()用法

    C# BitmapData和Marshal.Copy()用法 //此函数用法例子如下: public static byte[] GetGrayArray(Bitmap srcBmp, Rectang ...

  5. hdu1068 Girls and Boys 基础匈牙利

    #include <cstdio> #include <cstring> #include <algorithm> #include <cstdlib> ...

  6. Codeforces Round #302 (Div. 1) 训练

    链接: http://codeforces.com/contest/543 过程: 惨淡的只做出了A和C 题解: A 题解: 简单的一道题 我们用$dp[i][j]$表示当前考虑到前num个人(这个另 ...

  7. java中常用到的math方法(Math.PI、Math.random()、Math.abs(double)、Math.floor(double)、Math.ceil(double)、Math.round(double))

    public class MathDemo { public static void main(String args[]){ /** * abs求绝对值 */ System.out.println( ...

  8. C++ <string> 里面的size_type

    string::size_type string的 str.size() 返回值是一个unsigned,实际上返回的是size_type类型的值. string类和其他的大多数标准库类型都定义了几套配 ...

  9. PHP的扩展知识

    1. 图片的上传大小受哪一些限制? 答:浏览器 其实php.ini文件里面 1. upload_max_filesize = 2M  限制单个文件上传大小 2. post_max_size = 8M ...

  10. JVM线程与Linux内核线程的映射[转]

    Linux从内核2.6开始使用NPTL (Native POSIX Thread Library)支持,但这时线程本质上还轻量级进程. Java里的线程是由JVM来管理的,它如何对应到操作系统的线程是 ...