event loop机制/什么是微任务/什么是宏任务？二者什么区别/手写Promise使用

Even Loop机制

1、执行所有的同步代码，一行行放在Call Stack(调用栈)中执行

2、遇到异步，会先“记录”下代码，等待执行时机（setTimeout Ajax),时机到了，将之前“记录”的代码放入callback Queue(回调函数队列里)

3、当call Stack为空（同步代码执行完），EventLoop开始工作

4、EvenLoop轮询查找 callback Queue中是否有执行的代码，如果有，将代码移入到Call Stack中执行

5、Even Loop 如果没有找到可以执行的代码，则会继续轮询查找

什么是微任务

微任务：Promise、async await

宏任务：setTimeout setInterval、Ajax、DOM事件

二者区别

先执行微任务，再执行宏任务

例：

    console.log("start");
    setTimeout(() => {
      console.log("setTimeout");
    }, 2000);
    Promise.resolve().then(()=>{
      console.log("promise");
    })
    console.log("end");
//控制台： 
 start
 end
 promise
 setTimeout

解析：js的代码的执行顺序从上至下、从左至右的；先执行所有的同步打代码、再执行异步代码，

所以先输入start、end，然后再执行微任务，再执行宏任务

同步代码-》微任务-》渲染Dom-》宏任务

微任务、宏任务、Dom渲染的关系

1、call stack清空,触发Even Loop

2、执行微任务

3、DOM渲染

4、执行宏任务

Promise使用

回调地狱：下一次网络请求依赖上一次请求数据的，这样嵌套形成回调地狱，解决回调地狱的方法是promise

    // proise使用
    const Op = new Promise((resolve,reject)=>{
      // 异步操作成功的话调用resolve,异步操作失败的时候调用reject
      //reject、resole传参数
      setTimeout(()=>{
           reject()
      },1000)
    });
    //传入个函数，做相应操作
    Op.then(()=>{
      console.log("then");

    }).catch(
      ()=>{
         console.log("catch");
      }
    )

手写promise加载图片
    function loadImg(src) {
      return new Promise((resolve, reject) => {
        const oImg = new Image();
        oImg.src = src;
        oImg.onload = () => {
          resolve(oImg);
        };
        oImg.onerror = () => {
          resolve("图片加载失败");
        };
      });
    }
    //这个函数自动加载图片
    loadImg("https://robohash.org/1")
      .then((oImg) => {
        document.body.appendChild(oImg);
        return loadImg("https://robohash.org/2");
      }) //第一张图片加载完成再加载第二张图片
      .then((oImg) => {
        document.body.appendChild(oImg);
        return loadImg("https://robohash.org/3");
      })
      .then((oImg) => {
        document.body.appendChild(oImg);
      })
      .catch((errsg) => {
        console.log(errsg);
      });
  },

promise是async、await的语法糖

    function loadImg(src) {
      return new Promise((resolve, reject) => {
        const oImg = new Image();
        oImg.src = src;
        oImg.onload = () => {
          resolve(oImg);
        };
        oImg.onerror = () => {
          resolve("图片加载失败");
        };
      });
    }
    (async function(){
      try{
          const oImg =  await loadImg("https://robohash.org/1")  //不知道什么时候返回 外面套async函数
           document.body.appendChild(oImg);
                  const oImg2 =  await loadImg("https://robohash.org/2")  //不知道什么时候返回 外面套async函数
           document.body.appendChild(oImg2);
      }catch(error){
        console.log(error);
      }
        
    })()

考点1：then和catch内部没有throw new Error，相当于resolve

考点2：async function 相当于返回一个promise.resolve

    async function fn1(){
      console.log("fn1 start");
      await fn2(); //调用f2 await后面的代码是异步代码
      console.log("fn1 end");
    }
    async function fn2(){
      console.log("fn2 start");
    }
    console.log("start");
    fn1()
    console.log("end");
    // start
    // fn1 start
    // fn2 start
    // end
    //fn1 end