鍍金池/ 問答/HTML/ js類的constructor中不支持異步函數嗎？

js類的constructor中不支持異步函數嗎？

項目購物車是用class類來寫的，之前用于PC端，所有購物車的增刪改查都是放在localStorage中，沒什么問題
后來引入了微信瀏覽器中，微信瀏覽器的cookie、localStorage本地存儲的有一系列問題，可以說基本不能本地存儲，所以才用了服務器存儲，通過接口上傳及下載數據！以下是部分代碼
`
    class ShopCarTool{
      constructor(store){
       // var shopCar = DB.getItem('shop-car').toJson()// 從localStorage獲取
        /* 從服務器獲取 */
        let shopCar={};
        axios.get(url).then(res=>{
            shopCar=res.data
        })
        if(!shopCar){
          DB.setItem('shop-car', JSON.stringify(shopCar = {}))
        }
        this.$store = store
        this.shopCarDB = shopCar
      }
      length() {//獲取購物車商品數量小角標
        var n = 0;
        for(var i in this.shopCarDB){
          n += this.shopCarDB[i].length
        }
        return n
      }
    }

`

    現在的問題，通過localStorage獲取數據，可以把數據傳到shopCarDB 中，
    從而length()這個方法可以得到購物車內商品的數量，可以顯示!
    ![圖片描述][1]
    通過服務器請求的話，是耗時操作，length()方法里面的shopCarDB為空，即使服務器返回的數據不為空，
    自己感覺是 constructor內部不支持異步，不知道何理，請大神賜教

寫過new Promise方法調用length()，或者把this.shopCarDB = shopCar放在請求的返回里面都不行，直接從上到下執(zhí)行，導致這條路通不了，
雖然通過別的方案解決了購物車為空的問題，但是想一探究竟，另外獲取localStorage內存儲的數據是耗時操作嗎
回答
編輯回答
傻丟丟

一般來說，如果有需要異步初始化的操作的話。都是在constructor中調用異步函數，初始化完畢用事件去提醒外部，外部只需要監(jiān)聽事件，如果是非事件型的對象，外部可以多寫一個await他的初始化函數來讓其完成異步的數據調用。

另一個答案的方法也很好，通過一個函數預先拿到初始化數據再實例這個類

2017年5月17日 05:40
編輯回答
墨沫

如果是普通函數，可以用async 和await來解決你的問題
但你這個是在constructor里，constructor 的作用是返回一個對像實例，如果加了async就變成返回一個promise了，所以這個方法行不通，因為做不到既返回一個promise又返回一個object 實例

可以用變通方法

class ShopCarTool{
      constructor(store，from_async){
       // var shopCar = DB.getItem('shop-car').toJson()// 從localStorage獲取
        /* 從服務器獲取 */
        
        
        if(!from_async){
          DB.setItem('shop-car', JSON.stringify(shopCar = {}))
        }
        this.$store = store
        this.shopCarDB = from_async
      }
      static async build(store){
          let data = await axios.get(url)
          return new ShopCarTool(store,async_result);
      }
      length() {//獲取購物車商品數量小角標
        var n = 0;
        for(var i in this.shopCarDB){
          n += this.shopCarDB[i].length
        }
        return n
      }
    }
所以你哪你要實例化也改成
var tool = await ShopCarTool.build(store)

tips: 代碼沒有經過嚴格驗證，就是這么個意思，不要照抄

2017年9月14日 18:52