时间戳

首页 > 解决方案 > 如何在加载时捕获模块抛出的异常？

typescript - 如何在加载时捕获模块抛出的异常？

问题描述

如果环境无效，我将验证环境变量并显示带有错误消息的页面。我可以这样做吗？

config.tsenv如果无效则抛出异常

import * as yup from 'yup'

console.log(process.env)

const envSchema = yup.object({
  REACT_APP_API_BASE_URL: yup
    .string()
    .required()
    .url()
    .label('REACT_APP_API_BASE_URL')
})

export default envSchema.validateSync(process.env)

index.ts负载config.ts。它可以捕捉到它的异常吗？

//try {  import cannot be inside try
import config from 'config' //exception thrown if env is invalid

标签： typescriptexceptiones6-modules

解决方案

使用该语法时，不可以，但可以使用动态导入。

https://mariusschulz.com/blog/dynamic-import-expressions-in-typescript有一些很好的 TypeScript 示例和动态导入的解释。

在您的情况下，这看起来像：

const config = import('config').catch((error) => {
  // Do something if you get an error
});

请注意，这使得加载异步，因此config将是对模块值的承诺，而不仅仅是值本身，并且您的其余代码不会自动等待加载完成。您需要明确await config说明要在哪里使用它或类似的。

正常导入语法的问题在于，它被设计为在实际运行该文件中的任何代码之前静态提取和执行，这意味着您没有任何地方可以设置任何错误处理。

值得注意的是，一旦 TypeScript 3.7 发布，您将能够在模块中使用顶级 await，因此您可以config转换为正常的模块值，后续代码将按照您的预期自动等待，如下所示：

const config = await import('config').catch((error) => {
  // Do something if you get an error
});

最后一个选项：如果您使用的是 commonjs 模块，则可以退回到同步require('config')调用：

let config: any;
try {
  config = require('config');
} catch (e) {
  // Do something if you get an error
}

这将达到您的预期，但您会丢失打字（可修复，但很难做好），一般来说，我建议转向 ES 模块而不是与它们对抗，因为它们是标准。

推荐阅读