前端异步编程六种方案

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