【javascript】异步编年史,从“纯回调”到Promise
异步和分块——程序的分块执行
异步和非阻塞
ajax("http://XXX.", callback); doOtherThing()
你肯定知道ajax这个函数的调用是发出请求取得一些数据回来, 这可能需要相当长的一段时间(相比于其他同步函数的调用)
回调存在的问题
信任问题和控制反转
ajax( "..", function(..){ } );
array.foreach(x => console.log(x) ) console.log(array)
setTimeout( () => { console.log('我是异步的') },0 ) console.log('我是同步的')
我是同步的 我是异步的
我是异步的 我是同步的
// 注: 这是一个相当乌托邦,且省略诸多内容的函数 function login (callback) {// 当取得的账号变量name的值为空时, 立即调用函数,此时callback同步调用)if(!name) {callback();return // name为空时在这里结束函数 }// 当取得的账号变量name的值不为空时, 在请求成功后调用函数(此时callback异步调用)request('post', name, callback) }
var a =1 zalgoFunction () {// 这里还有很多其他代码,使得a = 2可能被异步调用也可能被同步调用[ a = 2 ]} console.log(a)
analytics.purchase( purchaseData, function () {payWithYourMoney () } );
var analysisFlag = true // 判断是否已经分析(支付)过一次了 analytics.purchase( purchaseData, function(){if (!analysisFlag) {payWithYourMoney ()analysisFlag = false} } );
没办法在复杂的异步场景中很好地表达代码逻辑
doA( function(){doB();doC( function(){doD();} )doE(); } ); doF();
setTimeout(function (name) {var catList = name + ','setTimeout(function (name) {catList += name + ',';setTimeout(function (name) {catList += name + ',';setTimeout(function (name) {catList += name + ',';setTimeout(function (name) {catList += name;console.log(catList);}, 1, 'Lion');}, 1, 'Snow Leopard');}, 1, 'Lynx');}, 1, 'Jaguar');}, 1, 'Panther');
var a, b; function foo(x) {a = x * 2;if (a && b) {baz();} } function bar(y) {b = y * 2;if (a && b) {baz();} } function baz() {console.log( a + b ); } // ajax(..)是某个库中的某个Ajax函数 ajax( "http://some.url.1", foo ); ajax( "http://some.url.2", bar );
var flag = true; function foo(x) {if (flag) {x = x + 1baz(x);flag = false} } function bar(x) {if (flag) {x = x*2baz(x);flag = false} } function baz( x ) {console.log( x ); } // ajax(..)是某个库中的某个Ajax函数 ajax( "http://some.url.1", foo ); ajax( "http://some.url.2", bar );
一步一步地揭开Promise神秘的面纱
new Promise(function() {/* 异步操作 */ }
var promise = new Promise(function(resolve, reject) {// 这里是一堆异步操作的代码if (/* 异步操作成功 */){resolve(value);} else {reject(error);} });
promise.then(function(value) {// 成功 }, function(error) {// 失败 });
Promise是怎么一个个地解决回调带来的问题的
var p = new Promise( function(resolve,reject){foo.bar(); // foo未定义,所以会出错!resolve( 42 ); // 永远不会到达这里 :( } ); p.then(function fulfilled(){// 永远不会到达这里 :( },function rejected(err){// err将会是一个TypeError异常对象来自foo.bar()这一行 } );
// 用于超时一个Promise的工具 function timeoutPromise(delay) {return new Promise( function(resolve,reject){setTimeout( function(){reject( "Timeout!" );}, delay );} ); } // 设置foo()超时 Promise.race( [foo(), // 试着开始foo()timeoutPromise( 3000 ) // 给它3秒钟 ] ) .then(function(){// foo(..)及时完成!},function(err){// 或者foo()被拒绝,或者只是没能按时完成// 查看err来了解是哪种情况} );
Promise的完善的API设计使得它能够简洁优雅地处理相对复杂的场景
链式
Promise.then(// 第一个异步操作 ).then(// 第二个异步操作 ).then(// 第三个异步操作 )
getJSON('/post/1.json').then(function(post) {return getJSON(post.commentURL); }).then(function(comments) {// some code })
门
Promise.all([promise1,promise2 ]) .then(([data1, data2]) => getDataAndDoSomething (data1,data2)
竞态
var p = Promise.race([p1, p2, p3]);
转载于:https://www.cnblogs.com/penghuwan/p/7451409.html
【javascript】异步编年史,从“纯回调”到Promise相关推荐
- JavaScript异步编程【上】 -- 同步和异步、事件循环(EventLoop)、微任务和宏任务、回调函数
文章内容输出来源:拉勾教育 大前端高薪训练营 前言 在我们学习JavaScript中,我们知道,JavaScript的执行环境是单线程的.所谓单线程是指一次只能完成一个任务,如果有多个任务,就必须排队 ...
- JavaScript异步编程(1)- ECMAScript 6的Promise对象
JavaScript的Callback机制深入人心.而ECMAScript的世界同样充斥的各种异步操作(异步IO.setTimeout等).异步和Callback的搭载很容易就衍生"回调金字 ...
- 【学习笔记】Part1·JavaScript·深度剖析-函数式编程与 JS 异步编程、手写 Promise(二、JavaScript 异步编程)
[学习笔记]Part1·JavaScript·深度剖析-函数式编程与 JS 异步编程.手写 Promise(课前准备) [学习笔记]Part1·JavaScript·深度剖析-函数式编程与 JS 异步 ...
- JavaScript异步与Promise基本用法(resolve与reject)
Promise解决的问题 相信每个前端都遇到过这样一个问题,当一个异步任务的执行需要依赖另一个异步任务的结果时,我们一般会将两个异步任务嵌套起来,这种情况发生一两次还可以忍,但是发生很多次之后,就形成 ...
- javascript异步中的回调
同期异步系列文章推荐 谈一谈javascript异步 javascript异步与promise javascript异步之Promise.all().Promise.race().Promise.fi ...
- JavaScript异步Promise
1.同步vs异步 同步和异步在程序执行是相反的,同步执行指令是分先后顺序的,就像排队打饭一样,按照顺序执行.异步执行不按照先后到达的顺序,准备好了就可以进行,不会造成进程阻塞的问题.JS是单线程的,如 ...
- 写给初学者的JavaScript异步编程和背后思想
导读: 对于接触JavaScript这门编程语言没有多久的本菜鸡而言,在相当长的一段时间内,我都完全无法理解这门语言中的异步编程,不明白什么叫异步编程以及为什么需要异步编程.为什么顺序执行程序就不行了 ...
- 网页javascript加载不出_写给初学者的JavaScript异步编程和背后思想
导读:对于接触JavaScript这门编程语言没有多久的本菜鸡而言,在相当长的一段时间内,我都完全无法理解这门语言中的异步编程,不明白什么叫异步编程以及为什么需要异步编程.为什么顺序执行程序就不行了呢 ...
- JavaScript 异步编程--Generator函数、async、await
JavaScript 异步编程–Generator函数 Generator(生成器)是ES6标准引入的新的数据类型,其最大的特点就是可以交出函数的执行的控制权,即:通过yield关键字标明需要暂停的语 ...
最新文章
- 高文院士:人工智能发展机遇
- [bzoj2213][Poi2011]Difference_动态规划
- bottle+jquery 前后端分离
- 糟糕程序员的20个坏习惯
- 今天来聊聊 Redis 的主从复制
- Flask框架——ORM数据库
- Iview的Tabs定时切换
- MYSQL中什么是规范化_数据库设计 - 什么是规范化(或规范化)?
- Android面试题整理【转载】
- 工程力学和计算机专业,2018工程力学专业就业方向及就业前景分析
- 原生拦截WebView页面下载链接跳转空白页问题
- 僵尸网络“Mykings”
- Python代码实现将png格式图片批量转换为jpg个格式
- 苹果手机上网很慢_手机4G信号满格,上网速度却很慢?原来都是它们在“搞鬼”...
- D3 二维图表的绘制系列(二十三)旭日图
- win10 使用多桌面的两种方式
- bat如何获取当前Windows系统的桌面路径
- 数学建模竞赛常用软件培训2
- java程序封装最小单位,Java面试真题精选
- docker容器里无法使用vi命令