使用 promise.all（） 导入多个 vue.js 组件

Importing multiple vue.js components using promise.all()

提问人：Matias 提问时间：10/31/2023 更新时间：10/31/2023 访问量：33

问：

我正在尝试同时导入多个 Vue.js 2.7 组件，这是我到目前为止的进展。但是，我不确定我是否正确管理异步导入或只是按顺序运行所有内容。

importComponents(modules) {
    return Promise.all(modules.map(this.importModule, this));
},

async importModule(module) {
    try {
        const fileName = module.idx.charAt(0).toUpperCase + module.idx.slice(1);
        const path = `./modules/${fileName}.vue`;

        this.$options.components[module.idx] = async () => {
            return await import(/* webpackChunkName: "my-modules" */ `${path}`);
        };
    } catch (error) {
        console.error(`Failed to import the component ${fileName}: ${error.message}`);
    }
}
javascript 异步 webpack vuejs2 promise

评论

答：

1赞 Ale_Bianco 10/31/2023 #1

可以进行一些调整。

  • 在 JavaScript 中，是一个函数，因此您应该调用它 like 而不是 .因此，更改为 .toUpperCasetoUpperCase()toUpperCasetoUpperCasetoUpperCase()

    const fileName = module.idx.charAt(0).toUpperCase() + module.idx.slice(1);

  • Vue 本身本身支持动态导入。您可以直接返回 import 语句。

    async importComponents(modules) {
   await Promise.all(modules.map(this.importModule, this));
},

async importModule(module) {
   try {
     const fileName = module.idx.charAt(0).toUpperCase() + module.idx.slice(1);
     const path = `./modules/${fileName}.vue`;

     this.$options.components[module.idx] = await import(/* webpackChunkName: "my-modules" */ `${path}`);
   } catch (error) {
     console.error(`Failed to import the component ${fileName}: ${error.message}`);
   }
}

评论

0赞 Matias 11/1/2023
感谢您的快速回答！现在您向 importComponents（） 1 添加了 async，现在只需几个问题。我还需要等待吗？2.如果是这样，我可以避免以某种方式将所有方法向上更改为异步/等待吗？3. 如果在 @click 事件上调用 importComponents（） 怎么办，您可以执行类似 @click=“await importComponents（）” 之类的操作吗？
1赞 Ale_Bianco 11/1/2023
是的，如果您标记为 ，则在调用它时应该这样做。<template> <button @click=“await importComponents（）”>Load Components</button> </template> 如果要避免将所有方法标记为 ，可以选择坚持使用 promise 并使用语法。importComponents（modules）.then（（） => { // 导入组件后运行的代码 }）;importComponents()asyncawaitasync.then()
1赞 Ale_Bianco 11/1/2023
Vue 事件处理程序（如 ）不直接支持 。可以在方法中处理异步代码并返回 promise。如果要在执行其他操作之前等待组件导入@clickasync/await
0赞 Matias 11/1/2023
我看到就我而言，最好只使用 .then（），感谢您清除所有内容！

上一个：在 promise 中无法识别状态变量的问题

下一个：如何在javascript异步循环方法中推送到数组？[复制]