背景

获取数据源接口，每次接口获取的数据内容一致【配置项、地址数据等】，但数据又会在不同的页面、或者不同的组件之间多次使用，每次调用会浪费网络资源，较优的做法懒加载接口，仅请求一次接口

思路与实现

使用单例模式，借助promise的resolve状态 缓存数据。代码示例如下：

import { reactive } from 'vue'
import http from '@http';

class AreaInfo {
  areaDetailInfo = reactive({})

  _initPromise = null

  async init(refresh = false){
    if(this._initPromise && !refresh){
      return this._initPromise
    }
    this._initPromise = new Promise(async (resolve, reject) =>{
      const { success, obj } = await http.request('xxxxxxx')
      if(success && obj){
        resolve(obj)
      }
      resolve({})
    })
    return this._initPromise
  }
  
  async getAreaInfo(){
    const res = await this.init()
    this.areaDetailInfo = res
    console.log(this.areaDetailInfo, '地区 shuju ===>')
  }
}

const areaInfo = new AreaInfo()

export default areaInfo

使用

// 组件a：
import areaInfo from '@/modules/areaInfo.js';

const info = await  areaInfo.getAreaInfo()

// 组件b：
import areaInfo from '@/modules/areaInfo.js';

const info = await  areaInfo.getAreaInfo()

ES Module【CJS】多次引用，仅执行依次，所以AreaInfo类仅构造一次

对于数据有更改变化的，还是最好全局状态管理