具有承诺和关闭范围的延迟加载

时间:2019-04-12 19:25:52

标签: javascript promise closures lazy-loading

我需要制作一个异步和延迟加载模块来获取一些配置值。闭包变量作用域相对于诺言有什么限制吗?

给出以下模块,该模块定义了一个加载器函数,该函数执行带有promise的异步加载并将配置存储到模块作用域中,以实现延迟加载,从而避免每次都不需要加载该配置。

const configModule = () => {
  let config;

  const loader = () => {
    return new Promise((resolve, reject) => {
      if(!config) {
        setTimeout(() => {
          const loadedValues = {foo: 'this be config', bar: 'OK?'};
          console.log('config loaded', loadedValues);
          resolve(loadedValues);
        }, 1);  
      }
      else {
        console.log('config already loaded');
        resolve(config);
      }
    }).then(res => {
      console.log('loader then', res);
      config = res;
      return config;
    })
  };

  return {
    loader: loader
  };
};

使用以下客户端代码,该配置已加载,但始终是全新的,即未缓存,延迟加载不起作用。

const cc = configModule();

cc.loader().then(result => {
  console.log('1', result);
});
cc.loader().then(result => {
  console.log('2', result);
});

这里关闭范围和承诺是否缺少我的东西?还是这种方法可行?有什么选择?

1 个答案:

答案 0 :(得分:1)

您的缓存模块运行正常。但是在测试中,您将立即进行两个“ API调用”。因此,两个cc()调用都会在另一个if (!config)更新之前对其进行测试。只要一个调用能够返回一个值并更新config,缓存就会开始工作。

const configModule = () => {
  let config;

  const loader = () => {
    return new Promise((resolve, reject) => {
      if (!config) {
        setTimeout(() => {
          const loadedValues = {
            foo: 'this be config',
            bar: 'OK?'
          };
          console.log('config loaded', loadedValues);
          resolve(loadedValues);
        }, 1);
      } else {
        console.log('config already loaded');
        resolve(config);
      }
    }).then(res => {
      console.log('loader then', res);
      config = res;
      return config;
    })
  };

  return {
    loader: loader
  };
};

const cc = configModule();

cc.loader().then(result => {
  console.log('1', result);
});
setTimeout(() => cc.loader().then(result => {
  console.log('2', result);
}), 100);