前端异步编程六种方案

1、回调函数

优点:简单、容易理解和实现
缺点:就是容易写出回调地狱(各个部分之间高度耦合,使得程序结构混乱、流程难以追踪)
	ajax(url, () => {});

2、事件监听

特点:异步任务的执行不取决于代码的顺序,而取决于某个事件是否发生
优点:比较容易理解、可以绑定多个事件,每个事件可以指定多个回调函数,而且可以"去耦合",有利于实现模块化
缺点:将整个程序都要变成事件驱动型,运行流程会变得很不清晰。阅读代码的时候,很难看出主流程
	f1.on('done', f2); // 事件f1完成done事件后,再执行f2

3、发布订阅

理解:我们假定,存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(publish)一个信号,其他任务可以向信号中心"订阅"(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"(publish-subscribe pattern),又称"观察者模式"(observer pattern)
	// f2 向信号中心 jQuery 订阅 done 信号
	jQuery.subscribe('done', f2);

	// f1 执行完成后,向信号中心 jQuery 发布 done 信号,从而引发 f2 的执行
	function f1() {
    	setTimeout(function () {   
    		// ...   
     		jQuery.publish('done');  
     	}, 1000);
	}

	// f2 完成执行后,可以取消订阅
	jQuery.unsubscribe('done', f2);

4、promise

5、生成器 Generators/ yield

特点:ES6 提供的一种异步编程解决方案,可以控制函数的执行
  • 语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。 Generator
  • 函数除了状态机,还是一个遍历器对象生成函数。 可暂停函数, yield 可暂停,next 方法可启动,每次返回的是 yield
  • 后的表达式结果。 yield 表达式本身没有返回值,或者说总是返回 undefined。next
  • 方法可以带一个参数,该参数就会被当作上一个 yield 表达式的返回值
拓展:co是一个为 Node.js 和浏览器打造的基于生成器的流程控制工具,借助于 Promise,你可以使用更加优雅的方式编写非阻塞代码
	// 解决回调地狱问题
	function *fetch() {
   		yield ajax(url, () => {})
    	yield ajax(url1, () => {})
    	yield ajax(url2, () => {})
	}
	let it = fetch()
	let result1 = it.next()
	let result2 = it.next()
	let result3 = it.next()

6、async/await

特点:async/await 函数的实现,就是将 Generator 函数和自动执行器,包装在一个函数里
区别:async/await 函数对 Generator 函数的改进,体现在以下三点:
  • 内置执行器。 Generator 函数的执行必须靠执行器,所以才有了 co 函数库,而 async 函数自带执行器。也就是说,async 函数的执行,与普通函数一模一样,只要一行。
  • 更广的适用性。 co 函数库约定,yield 命令后面只能是 Thunk 函数或 Promise 对象,而 async 函数的 await 命令后面,可以跟 Promise 对象和原始类型的值(数值、字符串和布尔值,但这时等同于同步操作)。
  • 更好的语义。 async 和 await,比起星号和 yield,语义更清楚了。async 表示函数里有异步操作,await 表示紧跟在后面的表达式需要等待结果。

详解于:https://www.infoq.cn/article/zwowtega7KjC4Ad-trp4?utm_source=related_read&utm_medium=article

上一篇:C++Primer练习1.5.1答案


下一篇:java复制一个文件到另一个目录下