javascript，异步，等待 : can't extract value into class variable

Question

tldr 如何从 Promise 中设置类变量？

我正在敲我的头，因为我太笨了，不会使用 async/await用javascript。当然有很多示例和博客文章，但它们是 'then'将结果局限于console.log ，我不需要的。

我的用例非常简单，我想使用 fetch 从 json 加载翻译(如果尚未加载)，然后使用函数 translate 返回翻译后的值.

我想如果我使用 then , 然后暂停执行直到 Promise解决或失败。

class Test {

    constructor() {
    }

    /**
     * Loads translations
     */
    async _loadTranslations() {
        console.log("Loading tanslations");
        let response = await fetch('data.json');
        let json =  await response.json();
        return json;
    };

    translate(key, language) {
      if(!this.translation){
         this._loadTranslations().then(data =>{
            console.log("data is loaded!", data);
            this.translation = data;});
       }
       return this.translations[language][key];
    }

}

console.log("translation",new Test().translate("MEGA_MENU_CMD","de-DE"))

但它总是记录 translation undefined .

我不想要这样的东西

  new Test()._loadTranslations().then(r => console.log("result",r))

因为我想在模板中使用翻译功能，我不想使用 .then在我所有的模板中。

编辑 我不知道如何使用 fetch从 API 获取数据并将其设置为类的模型。 then s 和 callback在我看来，做不同的事情。或者实例化类、从 API 加载数据然后使用该数据的正确方法是什么？

第二次编辑:

事实上，我只想创建一个 TranslationMixin 并加载一次翻译。然后在我的页面中(我正在玩 Polymer)我想使用 return html '<div>${this.translate("de-De","propertyX"}<div>'这就是为什么我不想要 Promise 而只想要普通字符串的原因。事实上，翻译应该在构建期间加载并完成。但是作为fetch返回 Promise我坚持 Promise并未能获得值(value)(#sigh)。所以我可能只坚持常规 XMLHttpRequest ...

Answer 1

您需要等到翻译完成。最简单的方法是让 translate 也成为一个异步函数。这将返回一个 promise ，您可以在 then() 中获得翻译:

class Test {

    constructor() {
    }

    /**
     * Loads translations
     */
    async _loadTranslations() {
        console.log("Loading tanslations");
        this.translation = "some translation"
        return this.translation;
    };

    async translate(key, language) {
      if(!this.translation){
         return this._loadTranslations().then(data =>{
            console.log("data is loaded!", data);
            return  data;});
       }
       return this.translation;
    }

}
new Test().translate("MEGA_MENU_CMD","de-DE")
.then(translate => console.log(translate))