如何使用JavaScript对比两个OpenAPI JSON文件并展示差异？

1. 读取并解析新旧JSON文件 #

封装方法处理本地文件的异步读取与JSON解析，捕获可能的错误：

const fs = require('fs').promises;
const axios = require('axios');

async function readAndParseJson(filePath) {
  try {
    const content = await fs.readFile(filePath, 'utf8');
    return JSON.parse(content);
  } catch (err) {
    console.error('文件读取/解析失败:', err);
    return null;
  }
}

2. 提取API路径集合 #

OpenAPI规范中所有接口路径都存放在paths字段下，提取该对象的键值并转为集合，方便后续对比操作：

function extractApiPaths(swaggerJson) {
  if (!swaggerJson?.paths) return new Set();
  return new Set(Object.keys(swaggerJson.paths));
}

3. 对比路径差异 #

通过集合差集计算，筛选出新增和缺失的API路径：

function comparePaths(oldPaths, newPaths) {
  const added = [...newPaths].filter(path => !oldPaths.has(path));
  const missing = [...oldPaths].filter(path => !newPaths.has(path));
  return { added, missing };
}

4. 生成差异提示并弹窗展示 #

将差异整理为指定格式，用浏览器原生弹窗（或自定义UI组件）展示：

function showDiffAlert(diff) {
  let alertContent = 'Attention: there is changes in Backend API:\n';
  if (diff.missing.length) {
    alertContent += diff.missing.map(path => `Missing ${path}`).join('\n');
    alertContent += '\n';
  }
  if (diff.added.length) {
    alertContent += diff.added.map(path => `Added ${path}`).join('\n');
  }
  alert(alertContent.trim());
}

5. 整合完整流程 #

将下载新文件、读取解析、对比差异、弹窗展示的步骤串联，实现完整逻辑：

async function processAndCompareSwagger() {
  // 下载最新OpenAPI并保存为newSwagger.txt
  try {
    const res = await axios.get('http://localhost:5004/swagger');
    await fs.writeFile('newSwagger.txt', JSON.stringify(res.data), 'utf8');
  } catch (err) {
    console.error('新文件下载/保存失败:', err);
    return;
  }

  // 读取解析新旧文件
  const oldSwagger = await readAndParseJson('swagger.json');
  const newSwagger = await readAndParseJson('newSwagger.txt');
  if (!oldSwagger || !newSwagger) return;

  // 提取路径并对比
  const oldPaths = extractApiPaths(oldSwagger);
  const newPaths = extractApiPaths(newSwagger);
  const diff = comparePaths(oldPaths, newPaths);

  // 有差异则弹窗，并更新旧文件
  if (diff.added.length || diff.missing.length) {
    showDiffAlert(diff);
    await fs.writeFile('swagger.json', JSON.stringify(newSwagger), 'utf8');
  } else {
    console.log('API路径无变更');
  }
}

// 执行流程
processAndCompareSwagger();

额外说明 #

• 若为纯前端项目，无法直接读取本地文件，需通过后端接口获取新旧OpenAPI内容，再在前端完成对比和弹窗逻辑
• 可替换原生alert为UI框架的弹窗组件（如Element UI MessageBox），优化展示样式
• 需确保项目已安装axios：执行npm install axios

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