动态导入异常处理

Question

我使用 ES6 动态导入在我的 React 应用程序中完成代码拆分。但是，我想对应用程序进行身份验证，并注意到当 import() 出去获取 JS 块或 CSS 时，它会按预期获得 401。但是，当我通过以下方式捕获异常时：

import("Component1").then( 
    module => this.setState({ module }) ).catch( 
    err => console.log(err) 
);

通过“err”返回的错误不包含 HTTP 响应和状态代码 (401)。反正有陷阱吗？我假设 import() 必须在幕后执行 fetch() ，这将可以访问它。

Answer 1

因此，我想跟进我发现的有关动态导入的一些事情。深入研究 webpack 的源代码，我发现它使用<script>标签来获取块，因此脚本的 onerror 回调不提供状态代码或响应。

这里的这个有用的回复帮助我更好地理解了为什么更好以及如何将块实现为 xhr 请求而不是脚本加载（剧透警报：您需要实现一个新的 webpack 插件）： https ://stackoverflow.com/a /37835802/8087836