时间戳

首页 > 解决方案 > 如何解决打字稿中类getter方法中的承诺

typescript - 如何解决打字稿中类getter方法中的承诺

问题描述

我有两个类，我使用 async/await 函数从产品类中获取产品。 

export default class Products {
   async getProducts() : Promise<[]> {
        return await import('../data/products.json');
   }
}

export default class App {
    render() {
        this.products = new Products();
        this.products.getProducts().then((productsData) => {
            // Do stuff
        });
    }
}

这很好用，但是我想在产品类中修改数据，然后再在 App 类中获取数据。我试图将 getProducts 更改为 setProduct 我在构造函数中设置产品并像这样得到它们：

   async setProducts() : void {
        this.products = await import('../data/products.json');
   }
   public getProducts(): [] {
        return this.products;
   }

问题是，当我调用 getProducts 时，它还没有完成获取，并且我在 App 类中未定义。

所以我尝试了以下操作：

   public getProducts(): [] {
        let products: [];
        return this.products.then(dataSet => {
            products = dataSet;
        });
        return products;
   }

这也导致了未定义

如何让我的类或 getter 等到产品导入完成，以便我的 getter 方法总是返回导入的数据而不是 undefined ？

我要解决的问题是如何在类方法返回值之前解决承诺。换句话说，该方法首先返回产品，然后才由数据填充，我当然可以 setTimeout 但这不是一个好习惯。

标签： typescriptasync-await

解决方案

您可以尝试从 getProducts 方法返回一个承诺，例如：

 public getProducts(): [] {
    let products: [];
    return new Promise(function(resolve, reject) {
       this.products.then(dataSet => {
         products = dataSet;
         resolve(products)
       });
    });
 }

问题是 return 语句甚至在获取数据集之前运行。这是基本的异步行为。解决这个问题的一种方法是返回一个 Promise

推荐阅读