ES6VUE3+TypescriptGenerate完美解决异步操作同步化

ES6 VUE3&＃43;Typescript Generate完美解决异步操作同步化

基本理解

菜鸟文档里说明的比较清晰啦
Generator 有两个区分于普通函数的部分&＃xff1a;
一是在 function 后面&＃xff0c;函数名之前有个 * &＃xff1b;
函数内部有 yield 表达式。

var Judge &＃61; function* () {while (true) {console.log(&＃39;is True&＃39;);yield;console.log(&＃39;is False&＃39;);yield;}};var JudgeGen &＃61; Judge();JudgeGen.next(); //is TrueJudgeGen.next(); //is False


generator 函数于正常函数调用一样&＃xff0c;都是方法名后面跟括号。
但是不同的是generator 函数不会立即执行&＃xff0c;而是需要跟next()才能执行.每一次执行都会在yeild 停止。也可以使用return 人为停止&＃xff0c;比较基本的理念建议大家看看官方文档&＃xff0c;但是异步操作同步化真的非常好用。

异步操作同步化

相信使用最多的应该是异步操作同步化
使用generate 完美解决这个问题&＃xff0c;不需要用async await 写一些冗余代码
直接附上代码可以看到比较清晰

function* facePhoto(): Generator {console.log(&＃39;start&＃39;);yield blockOneSecondFun();console.log(&＃39;after block one second&＃39;);let response: any &＃61; yield getLoginTypeFun();console.log(&＃39;getLoginTypeFun&＃61;&＃39;);console.log(response);if (!response.captcha) {console.log(&＃39;captcha is false&＃39;);let captcha &＃61; yield captchaFun();} else {let message &＃61; yield messageFun();console.log(message);}yield console.log(&＃39;ending&＃39;);}var faceGen &＃61; facePhoto();faceGen.next();function blockOneSecondFun() {setTimeout(() &＃61;> {faceGen.next();}, 1000);}function getLoginTypeFun() {getVerifyFlag().then((response: any) &＃61;> {faceGen.next(response);});}function captchaFun() {setTimeout(() &＃61;> {//提前终止流程//可以看到done 已经为trueconsole.log(faceGen.return(&＃39;captcha finished&＃39;));}, 1000);}function messageFun() {faceGen.next(&＃39;message login start&＃39;);}


以下是控制台输出