localStorage在Vue mounted生命周期和异步函数中的读取行为分析？

Question

localStorage.getItem('test')已存在，从A应用调到B应用时的时机（域名都相同）：
想知道异步函数中localStorage.getItem('test')的值在mounted生命周期为什么取不到，代码如下：

mounted() {
  this.init()
},
methods: {
  async init() {
      console.log(localStorage.getItem('test')) // 此时能取到值
      const data = await request(xxx) // 发起某个请求的函数
      console.log(localStorage.getItem('test')) // 此时反而取不到值
  }
}

通过的尝试：定时器0.5s后调用init方法能获取test数据，感觉是队列的问题？
想知道：
1、localStorage第一次进入网页的读取方式
2、为什么获取不到test，具体的队列是怎么执行的

Answer 1

不会有问题，看上去是因为 request(xxx) 里面执行了一些业务修改了 localStorage，或者在等待期间其他的业务函数修改了 localStorage。

执行顺序就是你书写的顺序执行。先输出一次 getItem('test')，然后等待 request 请求返回结果之后再输出一次 getItem('test')

<script setup>
import { ref, onMounted } from 'vue'

const msg = ref('Hello World!')
localStorage.setItem('test', 'ABCDEFG')

onMounted(() => {
  console.log('onMounted1')
  init()
  init2()
  console.log('onMounted2')
})

async function init(){
  console.log('init1-test1', localStorage.getItem('test'))
  await mockApi('init1')
  console.log('init1-test2', localStorage.getItem('test'))
}

async function init2(){
  console.log('init2-test1', localStorage.getItem('test'))
  await mockApi('init2')
  console.log('init2-test2', localStorage.getItem('test'))
}

function mockApi(str) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(str + '-setTimeout')
      resolve('success')
    }, 1000)
  })
}

</script>

// log =>
onMounted1
init1-test1 ABCDEFG
init2-test1 ABCDEFG
onMounted2
init1-setTimeout
init1-test2 ABCDEFG
init1-setTimeout
init1-test2 ABCDEFG
init2-setTimeout
init2-test2 ABCDEFG