Visualization

javascript-tips

是用vtk.js的时候需要用到一些js的代码，这里记录一些tips。特别是导入数据的时候。

在 JavaScript 中，处理异步操作常用两种方式：.then() 和 async/await。两者本质上都基于 Promise，但在代码结构、可读性和维护性上有显著差异。

.then()：链式回调写法
.then() 是 ES6 中引入的 Promise 方法，用于依次处理异步步骤。语法简洁，但当逻辑嵌套较深时，可读性下降：

fetch('/data.json')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

在三维可视化库 vtk.js 中，读取 .vtp 数据通常如下：

reader.setUrl(filePath)
  .then(() => reader.loadData())
  .then(() => {
    const polyData = reader.getOutputData(0);
    mapper.setInputData(polyData);
    renderWindow.render();
  });

尽管功能完整，但逻辑被拆散在多个 .then() 中，不利于扩展和调试。

async/await：更直观的异步控制
自 ES2017 起，JavaScript 支持 async/await，使异步代码结构更像同步代码，便于书写和维护：

async function loadData() {
  try {
    const res = await fetch('/data.json');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

在 vtk.js 中同样适用，加载和渲染可以写得更清晰：

async function renderComponent(filePath) {
  const reader = vtkXMLPolyDataReader.newInstance();
  await reader.setUrl(filePath);
  await reader.loadData();

  const polyData = reader.getOutputData(0);
  mapper.setInputData(polyData);
  renderWindow.render();
}

相比 .then()，await 让渲染逻辑按顺序排列，易于插入条件判断、错误处理等。

在现代 JavaScript 开发中，async/await 是更推荐的主流方式。理解并掌握它，在如 vtk.js 这种涉及异步数据加载和渲染的场景中尤为重要。

在javascript中，这种箭头形式的关字通常就相当于定义一个函数
参数 => {函数体} 左边可以写函数的参数，右边就写成函数体即可。

推荐文章