如何在HTML中获取Async/Await响应并展示处理后的Swagger API文档

问题分析 #

1. swaggerJson输出undefined：spec.then()是异步回调逻辑，会在fetch请求完成后执行；而同步的console.log语句先于回调运行，此时swaggerJson还未被赋值，因此输出undefined。
2. spec未定义错误：spec.js中使用export导出变量，但html里的script标签未声明为模块类型，导出的变量无法被全局作用域访问，导致页面找不到spec变量。

解决方案 #

修改spec.js #

将加载和处理API规格的逻辑封装为异步函数，并暴露到全局作用域：

async function loadAndProcessSpec(url) {
  try {
    const res = await fetch(url);
    const spec = await res.json();
    // 删除所有API路径下的options方法
    for (const path in spec.paths) {
      delete spec.paths[path]['options'];
    }
    console.log('处理完成的API规格:', spec);
    return spec;
  } catch (error) {
    console.error('加载/处理API规格失败:', error);
    throw error;
  }
}

// 将函数挂载到window，供页面代码调用
window.loadAndProcessSpec = loadAndProcessSpec;

修改index.html #

等待API规格处理完成后，再初始化Swagger UI：

<body>
    <div id="swagger-ui"></div>
    <script src='spec.js' type="text/javascript"></script>
    <script src="./swagger-ui-bundle.js"></script>
    <script src="./swagger-ui-standalone-preset.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
   
    <script>
    window.onload = async function() {
      try {
        // 先加载并处理API规格
        const processedSpec = await window.loadAndProcessSpec('https://..../swagger.json');
        // 初始化Swagger UI
        const ui = SwaggerUIBundle({
          spec: processedSpec,
          dom_id: '#swagger-ui',
          deepLinking: true,
          presets: [
            SwaggerUIBundle.presets.apis,
            SwaggerUIStandalonePreset
          ],
          plugins: [
            SwaggerUIBundle.plugins.DownloadUrl
          ],
          layout: "StandaloneLayout"
        });
        window.ui = ui;
      } catch (error) {
        console.error('初始化Swagger UI失败:', error);
      }
    }
  </script>
</body>

关键说明 #

• 异步操作必须等待完成后才能使用结果，使用async/await替代then回调，代码逻辑更直观。
• 通过将处理函数挂载到window对象，避免了模块导出的作用域限制，确保页面代码能正常调用。

内容的提问来源于stack exchange，提问作者Rhea