异步

• 什么是单线程，和异步有什么关系

  • 单线程，只有一个线程，只能做一件事
  • 原因，避免DOM渲染的冲突，浏览器需要渲染DOM,js可以修改DOM,js执行的时候，浏览器DOM渲染会暂停
  • 解决方案，异步

• 什么是event-loop

  • 事件轮询，js实现异步的具体解决方案
  • 同步代码，直接执行。
  • 异步函数先放在异步队列中
  • 待同步函数执行完毕，轮询执行异步队列的函数

• jquery deferred

  • 无法改变js异步和单线程的本质
  • 只能从写法上杜绝callback这种形式
  • 它是语法糖，但解耦了代码
  • 很好的体现：开放封闭原则，扩展开放，修改封闭

    // jquery deferred jquery1.5以后支持的写法
    var ajax=$.ajax('./data.json')
    
    ajax.done(function(){}).fail(function(){}).done(function () {})
    //或者
    ajax.then(function(){
        //成功回调
    },function(){
        // 失败回调
    }).then(function(){},function () {})
  

    function waitHandle () {
        var dtd = $.Deferred() // 创建一个deferred对象
    
        var  wait = function (dtd) {
            var task = function () {
                console.log("执行完成")
                dtd.resolve()// 表示异步任务已经完成
                // dtd.reject()//表示异步任务失败或者出错
            }
            setTimeout(task,2000)
            return dtd
        }
        return wait(dtd)
    }
    var w = waitHandle()
    
    w.then(function () {
        console.log('ok1')
    },function () {
        console.log('err 1')
    }).then(function () {
        console.log('ok2')
    },function () {
        console.log('err2')
    })
  

• promise 的基本使用和原理

  • 异常捕获

      //规定 ：then只接受一个参数，最后统一用catch捕获
      result.then(function(){}).then(function () {}).catch(function () {})
    

  • 多个串联

      //串联
      var src1=""
      var result1 =loadImg(str1)
      var result2 = loadImg(str2)
      
      //链式操作
      result1.then(function (img) {
          console.log("第一个图片加载完成")
          return result2
      }).then(function (img) {
          console.log("第二个图片加载完成")
      }).catch(function () {
          
      })
    

  • Promise.all(),Promise.race() 接收一个promise对象的数组
    • Promise.all()待全部完成后，统一执行success
    • Promise.race() 只要有一个完成，就执行success
  • 标准
    • 三种状态，pending fulfilled rejected
    • Promise实例必须实现then方法
    • then 必须可以接收两个函数作为参数
    • then 返回的必须是一个Promise实例

• async/await (和promise的区别,联系)

  • then只是将callback拆开
  • async/await 是最直接同步的写法
  • await 后面跟的是一个promise实例
  • async/await 使用了Promise 并没有和Promise冲突
  • 完全是同步的写法，没有回调函数
    

    const load = async function () {
        const result1 = await loadImg(src1);
        console.log(result1)
        const result2 = await loadImg(src2)
        console.log(result2)
    }
    load()
  

• 当前js解决异步的方案

  • jquery deferred
  • Promise
  • async/await
  • Genertor