关于async/await的底层实现原理

1.小插曲：一道面试题

        箭头函数this指向父级作用域 

 //1.this指向
    var name = "啦啦啦啦啦"
    const obj = {
        name: "嘀嘀嘀",
        sayName: () => {
            console.log(this.name);
        },
        getSayName() {
            console.log(this);
            return () => {
                console.log(this.name);
            }
        }
    }
    const getSayName = obj.getSayName
    getSayName()()  //this指向window   "啦啦啦啦啦"
    obj.getSayName()()   //this指向obj   “嘀嘀嘀”

2. 生成器函数

        作用：

                1.函数可以分布执行

                2.函数可以有多次返回

                3.可以在函数执行的过程中，给函数内部传递信息

 function* gen(){
        const name = yield "张三"
        console.log(name);
        return "嘀嘀嘀"
    }
    const lt = gen()
    console.log(lt);    //gen
    console.log(lt.next());      //{done:false,value:"张三"}
    console.log(lt.next("啦啦啦啦"));    //啦啦啦啦  {done:true,value:"嘀嘀嘀"}

3.async/await的底层原理

        即生成器函数和promise

        3.1 首先声明三个步骤函数 

 function stepA(params){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(params+'A')
            },500)
        })
    }
    function stepB(params){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(params+'B')
            },500)
        })
    }
    function stepC(params){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(params+'C')
            },500)
        })
    }

        3.2 接着是生成器函数 

                每次返回的对象中的value均是promise对象 

    function * runAsync(params){
        const aRes=yield stepA(params)
        const bRes=yield stepB(aRes)
        const cRes=yield stepC(bRes)
        return cRes
    }

        3.3 执行生成器函数

                .next(),实现此次执行将上一次执行的返回值作为参数的功能

function runGen(lt,params){
        const ltObj=lt.next(params)       //生成器函数每次next调用,会返回一个对象{done:  ,value:  }
        if(ltObj.done){                   //判断对象中的done,若为true则表示结束
            return new Promise((resolve,reject)=>{
                resolve(ltObj.value)      //若结束则返回value
            })
        }else{    //未结束
            console.log(ltObj.value);
            return ltObj.value.then(res=>{
                console.log(res);
                return runGen(lt,res)
            })
        }
    }

        3.4 调用执行生成器函数

    runGen(runAsync("异步操作类似同步写法")).then(res=>{
        console.log(res);
    })

4. 用async/await实现3.3

 async function runAsync2(params){
        const aRes=await stepA(params)
        const bRes=await stepB(aRes)
        const cRes=await stepC(bRes)
        return cRes
    }
    runAsync2("async写法").then(res=>{
        console.log(res);
    })

 5.微信小程序部分

        5.1 分包加载

                小程序单包大小2M，应用过大小程序单包承载不了

                新建package文件——>新建pages文件——>新建页面——>配置app.json文件

//app.json文件中配置  
"subPackages": [
    {
      "root": "package-study",
      "pages": [
        "pages/first-page/first-page"
      ]
    }
  ],

        5.2 实现一个微信聊天功能

                消息轮询机制

                请求频率很高，每次请求都要包含请求头、请求体、三次握手建立连接

                但是http请求无法解决这个问题，http只能客户端发起，服务端响应

                需要实现双工通讯

onLoad(options) {
    wx.connectSocket({
      url: '',              //建立链接的url
    })
    wx.onSocketOpen((result) => {
      console.log("建立了链接");
    })
    wx.onSocketMessage((result) => {     //接收到服务器的消息事件的监听函数
      console.log(result);
      const data = JSON.parse(result.data)
      console.log(data.data);
    })
  },

//创建一个发送消息的点击事件，里边内容如下：
 wx.sendSocketMessage({
      data: JSON.stringify({
        from: "",      //消息发送方
        createTime: new Date().getTime(), // 发送时间                
        cmd: 11, // 命令固定内容                      
        group_id: 'web26', // 分组id。  想要发送到哪个组里                
        chatType: 1, //  聊天类型 固定内容                
        msgType: 0, // 消息类型 固定内容                
        content: "你好，测试测试", // 消息内容，自己设计结构，比如你想发送图片（图片上传的接口）                
        nickName: " ", // 用户昵称                
        avatar: "", // 用户头像                
        type: "1" // 消息类型。 你可以自己设计，发送过去是什么，返回的就是什么（1: 普通文本 2: 图片 3：点赞 4， 送花）              
      })
    })