export default导出一个对象，对象的某个属性值是异步的怎么办？

Question

我在配置文件setting.js中导出了一个对象，里面有个url属性值，原本的url属性值就是直接在process中获取的的

export default {
    url: process.env.VUE_APP_HTTP
}

在需要使用的文件中

import setting from 'setting.js'
export default {
 data() {
    return {
        path: setting.url
    }
 }
}

现在这个url需要修改为动态的，先请求一下后端接口，接口如果返回cdn地址，则url为后端返回的地址，如果后端不返回，就取process.env.VUE_APP_HTTP

原本想的是在setting.js中加上

async function cdnHost() {
  let requestUrl = undefined
  return getCdnHost()
    .then(res => {
      if (res.code) {
        requestUrl = res.data.cdnurl
      }
      return requestUrl || process.env.VUE_APP_HTTP
    })
}

export default {
   url: cdnHost()
}

在需要的文件里

import setting from 'setting.js'
export default {
 data() {
    return {
        path: null
    }
 }

 async mounted() {
    this.path = await setting.url
 }
}

但是这样的话需要在每个用到的文件里都加上

async mounted() {
   this.path = await setting.url
}

百八十个文件都改过于麻烦，大佬们有什么简单点的写法吗？

Answer 1

话不多说，在不改变原有代码基础上，仅修改setting.js的办法。不知道这样你能理解不

Answer 2

在渲染根组件前使用ajax读取配置文件并设置，目前我在项目中是这样处理的。

/**
 * 异步请求配置信息
 */
export async function fetchConfig() {
  if (fetchConfig.fetched || fetchConfig.retryIndex === (window.__fetchConfigCount ?? 10)) return

  fetchConfig.retryIndex ??= 0

  try {
    const { data } = await Axios.get(APP_PUBLIC_PATH + 'config/app.config.json?' + Date.now())

    AppConfig.init(data)

    fetchConfig.fetched = true
    fetchConfig.retryIndex = 0

    return data
  } catch (error) {
    if (fetchConfig.fetched) return

    fetchConfig.retryIndex++

    console.error(error)
    return fetchConfig()
  }
}