javaScript异步

1. 同步与异步

   1. 同步：符合咱们人的认知习惯，一行一行往下按照代码顺序执行，如果前面代码没有执行完，不会执行

      缺点：容易导致代码阻塞

   2. 异步：代码不会按照顺序执行，如果前面代码没有执行完，也会执行后面代码

      缺点：阅读代码有一定成本，包括调试

2. 异步的应用场景

   1. 数据请求（ajax）
   2. DOM操作:例如：点击事件
   3. 定时器操作：setTimeout,setInterval
   4. …

3. 管理异步

   1. 回调函数

      例如：
      $.ajax({
      	....
      	success:function(res) {
      	   $.ajax({
      	   
      	   success:function(res) {}
      	   })
      	}
      })
      

      缺点：容易导致回调地狱

   2. Promise

      为了解决回调地狱问题，提出用Promise来管理异步代码
      
      //定义
      function request() {
      
       return new Promise((resolve,reject)=>{
         console.log(111)
        if(满足) {
          resolve(返值)  //用.then()接收
        }else {
          reject(返值)  //用.catch接收
        }
      
      })
      }
      
      //调用
      request().then(res=>{
      
      }).catch(error=>{
      
      
      })
      

   3. async/await

      async/await：用同步的方式来管理异步代码
      
      async写在function关键字前面
      
      async function fn() {
      
      
      }
      await必须要结合async使用
      
      async function request() {
      
         await getList()
      }
      
      
      await后面能跟什么值？？ await后面只可以跟做任意值 
      
      new Promise代码是同步的
      .then是同步的
      但.then中的回调函数是异步的
      
      

async function async1(){
    console.log('async1 start')   
    await async2() 
    console.log('async1 end')    
}
async function async2() {
    console.log('async2')       
}
console.log('script start')    

setTimeout(() => { 
    console.log('setTimeout')   
});

async1()

new Promise((resolve=>{
    console.log('promise1')  
    resolve()
})).then(function () { 
    console.log('promise2')  
})
console.log('script end')     

运行结果：

1. script start
2. async1 start 
3. async2
4. promise1
5. script end
6. async1 end
7. promise2
8. setTimeout

代码执行顺序：同步-异步(先执行微任务->再执行)

异步：分宏任务代码和微任务代码(详细了解查一下event loop)

宏任务：

setTimeout
setInterval
setImmediate (Node独有)
requestAnimationFrame (浏览器独有)
I/O
UI rendering (浏览器独有)

微任务：

process.nextTick (Node独有)
async/await
Promise
Object.observe
MutationObserver