Javascript 动态导入返回承诺而不是对象 [重复]

Question

我在用 JavaScript 编写动态列表时遇到问题。我基本上有一个简单的两层系统，它将动态生成每个列表项并将其与一个对象配对，然后该对象将返回到具有一些基本属性的列表。简而言之，每个列表项的构建如下：

骷髅 包含可重用的属性和函数的对象，这些属性和函数在项之间是通用的。将来我计划包含大量数据我不想保留在我的服务器上每次他们查看组件时都必须发送给每个用户。

export default {
  name: 'Default',
  chapters: []
}

The Meat 将特定数据添加到骨架，然后将其导出。同样，这将向将与列表项配对的对象添加大量数据。

import Book from '@/book.js'

Book.name = 'The Almanac'
Book.chapters = ['Chapter 1', 'Chapter 2', ...]

export default Book

填充列表 该列表在组件安装时填充，检索有关用户可以从服务器访问的内容的信息。

  get (list) {
    DataService.getBooks(localStorage.getItem('Username')).then((res) => {
      res.data.forEach(function (item) {
        list.push({
          title: item,
          obj: import('@/TheAlmanac/book.js')
            .then(function (res) {
              return res.default
            })
        })
      })
    })
  }

我遇到的问题是，当我尝试使用以下代码行将动态导入语句的承诺结果分配给

obj

时：

this.items = this.items[index].obj.chapters

我得到：

Uncaught TypeError: Cannot read properties of undefined (reading 'obj')

我也尝试过箭头函数，但它返回相同的值。

有人可以指出我做错了什么，或者让我知道我想做的事情是否可行/良好的 JavaScript 实践？

Answer 1

在这里使用

async/await

更容易。

async get(list) {
    const res = await DataService.getBooks(localStorage.getItem('Username'));
    res.data.forEach(item => {
        list.push({title: item, obj: (await import('@/TheAlmanac/book.js')).default});
    });
}