[译]Bruno - 自由强大安全开源的 API 测试神器（文本管理/git友好/离线优先）- 高级指南当您的响应数据包

天下苦 postman 久矣！

原文链接：
Working with BigInt – Bruno Docs
Response Visualization – Bruno Docs

使用 BigInt

当您的响应数据包含 BigInt 时，解析的值可能会损坏，因为 Bruno 默认解析响应数据，这可能会导致保真度损失。这是因为 JSON.parse（） 默认情况下无法正确处理 BigInt 值。

但是，如果您需要访问原始响应数据（例如，如果它包含 BigInt），则可以绕过解析步骤。

要防止自动解析并直接使用原始响应数据，请将以下表达式添加到 pre-request 脚本中。

req.disableParsingResponseJson();

响应可视化太高级了

Bruno CLI 中的 bru.visualize 函数允许渲染各种类型的可视化，例如表格和 HTML。它支持每种可视化类型的不同 Provider ，从而在数据的显示方式方面提供灵活性。以下是有关支持的类型和 Provider 的示例和详细信息。

bru.visualize(type, config)

类型: 要渲染的可视化类型（例如，table、html）。
配置: 一个配置对象，其中包括：
- 名称: 可视化实例的名称。
- provider: 用于显示可视化效果的渲染库或提供进程（例如，ag-grid、react-table）。
- 属性: Provider 配置可视化效果所需的其他属性。

支持的可视化类型和 Provider

表可视化('table')

您可以使用不同的提供进程（如 ag-grid 和 react-table ）渲染表。

使用 ag-grid

示例：

ag-grid

const rowData = [
  { name: 'John Doe', age: 28, email: 'john@example.com', city: 'New York' },
  { name: 'Jane Smith', age: 32, email: 'jane@example.com', city: 'London' }
];
 
const columnDefinitions = [
  { field: "name", filter: true, floatingFilter: true },
  { field: "age", filter: true, floatingFilter: true },
  { field: "email", filter: true, floatingFilter: true },
  { field: "city", filter: true, floatingFilter: true }
];
 
bru.visualize('table', {
  name: 'table1',
  provider: 'ag-grid',
  props: { rowData, columnDefinitions }
});

这将使用 ag-grid Provider 呈现一个表，并在所有列上启用筛选器。

使用 react-table

示例：

react-table

const rowData1 = Array.from({ length: 2500 })
  .map((_) => [
    { firstName: 'Tanner', lastName: 'Linsley', age: 24, visits: 100 },
    { firstName: 'Tandy', lastName: 'Miller', age: 40, visits: 40 },
    { firstName: 'Joe', lastName: 'Dirte', age: 45, visits: 20 },
  ]).flat();
 
 
const columnDefinitions1 = [
  {
    id: "firstName",
    cell: (info) => info.getValue(),
    header: () => `<span className="flex flex-start">First Name</span>`,
    meta: { filterVariant: "text" },
  },
  {
    id: "lastName",
    cell: (info) => info.getValue(),
    header: () => `<span className="flex flex-start">Last Name</span>`,
    meta: { filterVariant: "text" },
  },
  // Additional column definitions here...
];
 
bru.visualize('table', {
  name: 'table2',
  provider: 'react-table',
  props: { rowData: rowData1, columnDefinitions: columnDefinitions1 }
});

此示例使用 react-table provier 呈现一个大型表，其中包含自定义标头和筛选条件变量。

HTML 可视化 ('html')

您还可以使用 html 类型呈现自定义 HTML 内容。这允许进行高级模板和格式设置，例如生成数据表或报表。

使用 HTML 字符串

示例：

html

const htmlString = `
<html>
  <head>
    <style>
      table { width: 100%; border-collapse: collapse; }
      th, td { border: 1px solid black; padding: 8px; }
      th { background-color: #f2f2f2; }
    </style>
  </head>
  <body>
    <table>
      <tr><th>Name</th><th>Age</th><th>Email</th><th>City</th></tr>
      <tr><td>John Doe</td><td>28</td><td>john@example.com</td><td>New York</td></tr>
      <tr><td>Jane Smith</td><td>32</td><td>jane@example.com</td><td>London</td></tr>
    </table>
  </body>
</html>
`;
 
bru.visualize('html', {
  name: 'htmlReport',
  content: htmlString
});

此示例将使用 html 类型呈现包含预定义数据的 HTML 表。

参数

名称	类型	说明
`type`	`string`	要渲染的可视化类型。支持的值： `table`， `html` 。
`config`	`object`	Configuration 对象。有关可用属性，请参阅下文。

配置属性

属性	类型	说明
`name`	`string`	可视化实例的名称。
`provider`	`string`	用于可视化的提供进程或渲染引擎。例如， `'ag-grid'`， `'react-table'`。
`props`	`object`	提供进程配置可视化效果所需的其他属性。
`content`	`string`	（仅适用于 `html` 类型）要呈现的 HTML 内容。