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);
    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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
        //为所欲为
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26