JS异步：执行原理与回调

一、JS异步的执行原理

  我们知道JavaScript是单线程的，而浏览器是多线程的。单线程执行任务需要一个个排队进行，假如一个任务需要很长时间执行（像ajax需要较长时间），会直接导致无响应，后面的任务一直在等待执行。这时候就需要用到异步。

  想了解异步，首先我们要知道浏览器有最基本的三个常驻线程： JS引擎线程，事件触发线程，GUI渲染线程。

  其中JS引擎线程和事件触发线程共同构成了一种事件循环机制，而GUI渲染线程与JS引擎是互斥的，当JS引擎执行时GUI线程会被挂起，GUI更新保存在一个队列中，当JS引擎空闲时，立即被执行。

  我们从它的事件循环机制解析：
  JS引擎线程中分为同步和异步任务：

    1.同步任务全部通过主线程执行，形成执行栈。
    2.当有异步任务时交给异步进程（WebAPIs）：包含事件触发线程或者定时器线程等处理，形成任务队列。
    3.当执行栈中的任务全部处理完成，主线程为空闲的时候，会从任务队列中提取任务到执行栈中执行。

  通俗来说，JavaScript除了主线程之外还存在一个任务队列，任务队列存放需要异步执行的内容，执行完主线程后，就会不断循环扫描执行任务队列的任务，直至队列清空。

画解：

  如图小明因为学习耗时长会，如果没做完就会一直无法玩DNF游戏了，就把学习放到了异步任务队列中，等玩完游戏(主线程)再学习(任务队列)。期间母亲添加学习事件(DOM事件)，小明每完成一个学习任务就看看还有啥任务(循环扫描),直至最后做完.

  下面再看一个例子（浏览器刷新不断点击按钮）：

      let myData = null
      //ajax请求
      function ajax() {
   
      //腾讯新冠实时数据接口，仅做学习
        axios.get('https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare')
          .then(data => {
   
            console.log("ajax返回成功");
            myData = data.data
            console.log(myData);

          })
          .<