Question

对于我正在使用的vue应用程序，我想要一个配置文件，构建后可以对其进行编辑。

为此，我设想将json配置文件放在前端的公共区域中。 config.json：

{
    "apiUrl": "https://localhost:44336/"
}

具有公开配置值的服务。 configuration.service.ts：

class ConfigurationService {
    public apiUrl: string | undefined;

    public constructor() {
        fetch("config.json")
            .then(response => {
                return response.json()
            })
            .then(data => {
                this.setApiUrl(data["apiUrl"])
            })
            .catch(err => {
                // TODO: handle error
            })
    }

    private setApiUrl(apiUrl: string){
        this.apiUrl = apiUrl
    }
}

export const configurationService = new ConfigurationService()

并通过让框架进行实例化，在需要的地方使用它。 axios.helper.ts：

import axios from 'axios'
import { configurationService } from '@/_services/configuration.service'

function configureDefaults() {
  axios.defaults.baseURL = configurationService.apiUrl
}

现在我有一个竞争条件，只有在使用该值之后，配置才准备就绪。

如何正确处理？

我还没有找到在构造函数中等待初始化完成的明确可能性。

Answer 1

不确定这是否是执行此操作的“正确”方法，但我已将config值添加到index.html头部的meta标签中：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta id="apiUrl" content="https://localhost:44336/" />
  [...]
</head>

<body>
  [...]
</body>

</html>

并在配置服务中阅读它：

class ConfigurationService {
  public apiUrl: string | undefined;

  public constructor() {
    var configElement = document.getElementById('apiUrl')

    if (configElement !== null) {
      var apiUrlValue = configElement.getAttribute('content')
      this.apiUrl = apiUrlValue !== null ? apiUrlValue : undefined
    }
  }
}

export const configurationService = new ConfigurationService()

等待配置被加载

1 个答案: