手撕js异步#24
发布于 1 个月前 作者 zhsonga 1204 次浏览 来自 分享

人不狠不敢多比比 就直接上代码了! 示例代码如下

req = (ms)=>{ return new Promise((resolve,reject)=>{ console.log(‘ff’) setTimeout(()=>{ console.log(‘dd’) resolve(‘pp’) },ms) }) } aa = async ()=>{ console.log(‘aa’) await req(5000).then(data=>{console.log(data)}) console.log(‘cc’) } bb=()=>{ console.log(‘bb’) } aa(); //aa(); bb();

注解 程序开始执行 => 执行a()=> 打印aa=> 执行req()=> **打印ff => ** //前面都是按代码顺序同步执行 settimeou进入timer队列 => // settimeout 为异步操作 社区内大佬写的eventloop详解 **promise进入pennding状态=> ** //promise 共有三个状态 一旦发生转换是不可改变的 阮一峰老师写的es6入门里有详细介绍 **await 执行让出线程控制权=> ** // async函数为Generator+co模块的语法糖 同时这里引入了协程的概念 Generator只是函数的容器 并不执行任何代码 yeild 和awiat 可以人为控制代码执行的时间点 (原话就是让出线程控制权 ) 这里的协程应该是不会创建新的线程 所有的代码还是在主线程上执行的 不知理解是否正确,毕竟大家口口相传js 就是单线程 :) 执行b()=> 打印bb=> js主线程为空不执行任何代码 等待异步结果返回=> 当主线程空闲的时候 才会执行eventloop各个队列返回的回调函数 这里引入macrotask 和 microtask的概念 详细请看这里 时间到了 settimeout执行=> 打印dd=> resolve()执行=> **promise变为成功状态=> ** **.then()执行打印pp=> ** // 这里执行完回调就会继续按顺序执行 所以才会感觉像同步的写法 如果后面继续执行遇到await依旧是 先返回 去执行别的代码 最后打印cc 程序结束

以上是个人对异步暂时的理解 欢迎大佬们指指点点#177

         第一次发帖希望引起大佬注意:)
2 回复

注意 markdown 格式

代码格式看着难受

回到顶部