Javascript类构造函数未按预期设置类变量

我试图在一个javascript助手类中按环境设置API端点，该类用于将数据拉入我的react应用程序。看起来是这样的：

import axios from 'axios';

class QueryHelper {
    endpoints;
    SupportEndpoint;
    MemberEndpoint;

    constructor() {
        debugger
        // get the endpoints set
        fetch('/environment')
            .then(response => response.json())
            .then(data => this.endpoints = data) // set the endpoints var with the json payload with all the endpoint and env data
            .then(() => {
                this.SupportEndpoint = this.endpoints.supportBaseUrl;
                this.MemberEndpoint = this.endpoints.memberBaseUrl;
            });
    }

    
    async fetchData(resource) {
        const resp = await axios.get(this.SupportEndpoint + '/' + resource);
        return resp.data;
    }
}

export default QueryHelper;

let helper = new QueryHelper();
helper.fetchData('MemberProfile')
    .then(response => response.json())
    .then(//do some other stuff);

它将被这样使用：

import axios from 'axios';

class QueryHelper {
    endpoints;
    SupportEndpoint;
    MemberEndpoint;

    constructor() {
        debugger
        // get the endpoints set
        fetch('/environment')
            .then(response => response.json())
            .then(data => this.endpoints = data) // set the endpoints var with the json payload with all the endpoint and env data
            .then(() => {
                this.SupportEndpoint = this.endpoints.supportBaseUrl;
                this.MemberEndpoint = this.endpoints.memberBaseUrl;
            });
    }

    
    async fetchData(resource) {
        const resp = await axios.get(this.SupportEndpoint + '/' + resource);
        return resp.data;
    }
}

export default QueryHelper;

let helper = new QueryHelper();
helper.fetchData('MemberProfile')
    .then(response => response.json())
    .then(//do some other stuff);

---

当我到达断点时，我可以单步通过构造函数，各个端点似乎都按照预期设置好了。但是当调用

fetchData

方法时，

SupportEndpoint

（以及任何其他端点）是

未定义的

，ajax调用以404失败。

构造函数异步设置这些道具。可以等到

fetch（“/environment”）

resolve，然后调用

helper.fetchData（）

，但是如果在实例化之后调用它太快，那么它就会失败

您需要一些机制来确保helper

isRready

函数延迟（）{
让我们下决心，拒绝；
常量承诺=新承诺（（r，j）=>{
解析=r；
拒绝=j；
});
返回{决定、拒绝、承诺}；
}
类查询帮助器{
终点；
支持端点；
成员终点；
_我已经准备好了；
_d；
准备好{
如果（此._已准备好）返回承诺。解决（真）；
如果（！这个）{
这个；
}
把这个还给我；
}
构造函数（）{
获取（“/environment”）
.then（response=>response.json（））
.then（data=>this.endpoints=data）//使用json有效负载和所有端点和环境数据设置端点变量
.然后（（）=>{
this.SupportEndpoint=this.endpoints.supportBaseUrl；
this.MemberEndpoint=this.endpoints.memberBaseUrl；
这是真的；
如果（this.\u d&&this.\u d.解决）this.\u d.解决（true）；
});
}
异步获取数据（资源）{
等着吧，我已经准备好了；
const resp=wait axios.get（this.SupportEndpoint+'/'+资源）；
返回相应的数据；
}
}

构造函数正在异步设置这些道具。可以等到

fetch（“/environment”）

resolve，然后调用

helper.fetchData（）

，但是如果在实例化之后调用它太快，那么它就会失败

您需要一些机制来确保helper

isRready

函数延迟（）{
让我们下决心，拒绝；
常量承诺=新承诺（（r，j）=>{
解析=r；
拒绝=j；
});
返回{决定、拒绝、承诺}；
}
类查询帮助器{
终点；
支持端点；
成员终点；
_我已经准备好了；
_d；
准备好{
如果（此._已准备好）返回承诺。解决（真）；
如果（！这个）{
这个；
}
把这个还给我；
}
构造函数（）{
获取（“/environment”）
.then（response=>response.json（））
.then（data=>this.endpoints=data）//使用json有效负载和所有端点和环境数据设置端点变量
.然后（（）=>{
this.SupportEndpoint=this.endpoints.supportBaseUrl；
this.MemberEndpoint=this.endpoints.memberBaseUrl；
这是真的；
如果（this.\u d&&this.\u d.解决）this.\u d.解决（true）；
});
}
异步获取数据（资源）{
等着吧，我已经准备好了；
const resp=wait axios.get（this.SupportEndpoint+'/'+资源）；
返回相应的数据；
}
}

fetch

是一个异步操作，返回一个承诺，因此您需要等待它完成。不确定为什么要使用axios并提取代码。

fetch

是一个异步操作，返回一个承诺，因此需要等待它完成。不知道为什么要使用axios并获取代码。