JavaScript异步机制、常见的异步方式

593 阅读2分钟

一、JavaScript执行机制:

  • 执行一个宏任务(栈中没有就从事件队列中获取)
  • 执行过程中如果遇到微任务,就将它添加到微任务的任务队列中
  • 宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)
  • 当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染
  • 渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取)




二、异步任务类型

microtasks //微任务
      promise  //常用
      process.nextTick
      Object.observe (废弃)
      MutationObservermacrotasks //宏任务
        setTimeout   //常用
        setInterval  //常用
        I/O
        UI //渲染
        setImmerdiate


三、真正认识Promise

Promise,简单来说就是一个容器,里面保存着某个未来才会结束的时间(通常是一个异步操作的结果);

Promise本身是同步的立即执行函数,promise异步体现在then的回调函数中,then的回调会等待执行的操作结束后再执行;

const p1 = new Promise(function(resolve,reject){
      setTimeout(()=>{
        console.log('1');
    resolve('success1');
      },1000)
     
}); 
p1.then(function(value){  
    console.log(value); // success1
});
console.log('2');
//输出2  1  seccess1

可以看出success1的打印等待 resolve执行完后再执行,所以真正的异步是在.then()里;


四、async await

当await后面跟的是 Promise 对象时,才会异步执行,其它类型的数据会同步执行

await后面的表达式会先执行表达式的内容,将表达式后面的代码放入微任务队列

async function test(){
    let res1 = await new Promise((resolve)=>{
        //reject('失败');//如果不执行resolve,执行reject,下面的代码不会执行并且会报错,可以在await外层使用try{}catch(e){}
    resolve();  如果不resolve,不会走下面的代码
    })
    let res2 = await "kkkkkk" //等同于 new Promise((resolve)=>{resolve('kkkkkk'))})
    return res2; //也可以return  res1;如果不returntest().then()取不到值
}