javascript - 等待所有对象属性值为真，然后继续执行代码

Question

我正在尝试解决涉及等待 ES6 导入的问题。我正在使用 localstorage 来设置对象属性内的值。首先，它们都以 false 开始，然后当它们被导入时，它们被单独设置为 true。此操作不到一秒钟。问题是，如果代码继续执行，它会在加载某些组件之前执行。

我已经尝试了一些不同的方法来只调用一个回调(以实际继续执行)一旦所有值都是真实的，但我似乎无法提出一个可行的干净解决方案.

基本上我需要这样的东西:

let exampleObj = {
    value1: true,
    value2: true,
    value3: false
}

function check() {
    for (let key in exampleObj) {
        if (!key) {
            // exampleObj[key] is false, so rerun this whole check
            check()
        }
    }
}

function start() {
    check()
    // if check() doesn't rerun, it means no `key` was still set to false.
    // therefor carry on and mount the app
    mountSomething()
}

start()

我不知道如何实现这一目标。

如有任何帮助，我们将不胜感激。

编辑:

一些更多的细节来帮助大家多一点。

基本上，前提是在客户端启用/禁用功能(使用 Vue 构建)。所以它是这样的:

• Vue 路由器只设置了几个路由
• 应用程序首先从 API 获取功能标志
• 如果给定的功能设置为 true，我会运行一个辅助方法来导入与该功能相关的组件，然后使用 vue 路由器的 addRoutes 功能来包含该路由
• 在 import then() 方法中，我将 localstorage 值设置为 true，因为我知道该组件确实已成功导入

快速快照:

const features = {}
const featureChecker = (feature, activity = false) => {
  features[feature] = activity

  localStorage.setItem('Features', JSON.stringify(features))
}

export const configureSomeFeatureRoute = (router) => {
  featureChecker('SomeComponent')

  import('@/path/to/SomeComponent.vue')
    .then(Home => {
      router.addRoutes([{
        name: 'some-component',
        path: '/some-path',
        component: SomeComponent.default
      }])

      featureChecker('SomeComponent', true)
    })
  }

在此之后，将调用一个 start() 方法，然后循环遍历我的本地存储 Features 对象并检查是否每个 Prop 都设置为 true 在继续执行和安装我的 Vue 应用程序之前。 这是我正在努力解决的部分。

Answer 1

只需使用 Promise.all。

let importsContainer = [];


let import1 =
  import ('@/path/to/SomeComponent.vue')
  .then(Home => {
    router.addRoutes([{
      name: 'some-component',
      path: '/some-path',
      component: SomeComponent.default
    }]);
  });

importsContainer.push(import1);


let import2 =
  import ('@/path/to/SomeComponent.vue')
  .then(Home => {
    router.addRoutes([{
      name: 'some-component',
      path: '/some-path',
      component: SomeComponent.default
    }]);
  });

importsContainer.push(import2);


Promise.all(importsContainer).then((imports) => {

  // everything is imported, do something or

});