如何获取 Swagger UI API JSON 规范下载 - JavaScript

在使用 Swagger UI 来展示和测试 API 文档时，有时我们需要下载 Swagger UI 的 API JSON 规范文件。这个文件包含了 API 的详细信息，可以被后端开发人员和其他团队成员用来生成代码、生成文档等。

以下是使用 JavaScript 获取 Swagger UI API JSON 规范的方法：

使用 Swagger UI Bundle

Swagger UI Bundle 是一个集成了 Swagger UI 的 JavaScript 库，可以轻松地在网页中展示 API 文档。我们可以通过调用该库的接口来获取 API JSON 规范。

首先，在你的网页中引入 Swagger UI Bundle 的 JavaScript 文件：

<script src="https://unpkg.com/swagger-ui-dist@3.52.0/dist/swagger-ui-bundle.js"></script>

然后，在 JavaScript 代码中创建一个 Swagger UI 实例，并获取 API JSON 规范：

const ui = SwaggerUIBundle({
  url: "https://your-api-url/swagger.json",
  ...
});

// 在 Swagger UI 渲染完成后触发的回调函数
ui.initOAuth({
  onComplete: async () => {
    // 获取 API JSON 规范
    const spec = await ui.specSelectors.specJson();

    // 将规范转换为 JSON 字符串
    const jsonSpec = JSON.stringify(spec, null, 2);

    // 输出 API JSON 规范
    console.log(jsonSpec);
  }
});

上述代码中，需要将 "https://your-api-url/swagger.json" 替换为你自己的 API JSON 规范文件的 URL。在 Swagger UI 渲染完成后，我们可以通过 ui.specSelectors.specJson() 方法获取 API JSON 规范，并将其转换为字符串格式。

使用 Fetch API

如果你不想使用 Swagger UI Bundle，你也可以使用 JavaScript 的 Fetch API 来手动获取 API JSON 规范。

fetch("https://your-api-url/swagger.json")
  .then(response => response.json())
  .then(spec => {
    // 将规范转换为 JSON 字符串
    const jsonSpec = JSON.stringify(spec, null, 2);

    // 输出 API JSON 规范
    console.log(jsonSpec);
  })
  .catch(error => {
    console.error("获取 API JSON 规范失败:", error);
  });

上述代码中，需要将 "https://your-api-url/swagger.json" 替换为你自己的 API JSON 规范文件的 URL。代码使用 Fetch API 发起一个 HTTP GET 请求来获取规范，然后将其转换为 JSON 格式，并输出为字符串。

以上就是使用 JavaScript 获取 Swagger UI API JSON 规范下载的方法。通过这些方法，你可以轻松地获取 Swagger UI 的 API JSON 规范，并在需要时进行处理和使用。

希望这篇介绍对你有帮助！如果有任何问题，请随时向我提问。