js异步赋值

为什么要异步赋值？是因为该值不能马上拿到。

应用场景：某被​​<iframe>​​嵌套的页面，提供一个js对象供外部访问。该对象需要做一定的运算才能完成初始化，因此采用异步操作，完成初始化后再通过父页面发射消息，通知相关组件来取值。

这段代码很简单，不值一哂，个人记录下来备忘。

1、被​​<iframe>​​嵌套的页面

var sheep = 0;//可供外部访问
getObj(sheep).then((goat) => {
    sheep = goat
    alert(sheep);//显示为1
    //发射一个消息
    window.parent.postMessage({
        cmd: 'sheepIsReady',
        params: {
            success: true,
            data: true
        }
    }, '*');
});

function getObj(sheep){
    return new Promise((resolve) => {
        //假设这里有大量且耗时的计算。。。
        //最后计算出结果
        sheep = 1;
        resolve(sheep);
    });
}

2、需要拿值的组件

<template>
    <div class="-map-container">
        <iframe :src="src" ref="iframe" @load="iframeLoad"></iframe>
    </div>
</template>

<script>
let iframeWin = null// 私有变量

export default {
  mounted () {
    window.addEventListener('message', this.handleMessage)
  },
  methods: {
    iframeLoad () {
      iframeWin = this.$refs.iframe.contentWindow
      window.console.log('iframe page loaded')
    },
    async handleMessage (ev) { // 接收来自iframe的消息
      if (ev.data.cmd === 'sheepIsReady') {
        let mysheep = iframeWin.sheep
        //为所欲为
      }
    }
  }
}