js异步执行顺序解析#24
发布于 9 个月前 作者 zhsonga 3143 次浏览 最后一次编辑是 7 个月前 来自 分享

示例代码如下

	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 可以人为控制代码执行的时间点 (原话就是让出线程控制权 )
执行b()=> 打印bb=> js主线程为空不执行任何代码 等待异步结果返回=> 当主线程空闲的时候 才会执行eventloop各个队列返回的回调函数 这里引入macrotask 和 microtask的概念 详细请看这里 时间到了 settimeout执行=> 打印dd=> resolve()执行=> **promise变为成功状态=> ** **.then()执行打印pp=> ** // 这里执行完回调就会继续按顺序执行 所以才会感觉像同步的写法 如果后面继续执行遇到await依旧是 先返回 去执行别的代码 最后打印cc 程序结束

2 回复

注意 markdown 格式

代码格式看着难受

回到顶部