时间戳

首页 > 解决方案 > javascript，异步，等待：无法将值提取到类变量中

javascript - javascript，异步，等待：无法将值提取到类变量中

问题描述

tldr如何从一个类中设置一个类变量Promise

我在敲我的头，因为我太笨了，无法使用async/awaitjavascript。当然有很多示例和博客文章，但它们只是then'将结果放入console.log我不需要的内容中。

我的用例非常简单，我想使用 fetch 从 json 加载翻译（如果尚未加载），然后使用 function 返回翻译后的值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 和callbacks 做不同的事情。或者实例化一个类、从 API 加载数据然后使用这些数据的正确方法是什么？

第二次编辑：

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

标签： javascriptasync-await

解决方案

您需要等到翻译完成。最简单的方法是也创建translate一个异步函数。这将返回一个承诺，您可以在以下位置获得翻译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))

推荐阅读