Question

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

一旦所有值都是真实的，我尝试了几种不同的方法仅调用callback（实际上继续执行），但是我似乎无法提出一个可行的干净解决方案。

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

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对象，并在继续执行并挂载我的我的主机之前，检查每个道具都设置为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

});

Answer 2

尝试将其包装在Promises中，并使用setTimeout等待设置变量。然后使用Promise.all，这将等待所有Promise被解决。然后，您想在.then函数中执行逻辑。当然，在您的示例中，您不会res(1)，而是使用本地存储的值来解决。

const promise1 = new Promise((res, rej) => setTimeout(() => res(1), 2000))
const promise2 = new Promise((res, rej) => setTimeout(() => res(1), 2000))
const promise3 = new Promise((res, rej) => setTimeout(() => res(1), 2000))

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values)
  // your start function here.
});

等待所有对象属性值都为true，然后继续执行代码

2 个答案: