前端异步编程六种方案

2021-03-19 17:05:31 阅读：189 来源： 互联网

标签：异步 f2 await 函数六种编程 yield done async

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

标签：异步,f2,await,函数,六种,编程,yield,done,async
来源： https://blog.csdn.net/C_fashionCat/article/details/115010096

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9