元素
元素
工具
博客
问答

WebAssembly 导出的函数怎么在 JS 里调用？

翼杨~ 阅读 50
前端

我用 Rust 编译了一个 .wasm 文件，里面导出了一个叫 add 的函数，但在 JS 里加载后怎么都调用不了。我试过 instance.exports.add，但报错说不是函数。

我的 JS 加载代码是这样的：

WebAssembly.instantiateStreaming(fetch('pkg/add.wasm'))
  .then(result => {
    const add = result.instance.exports.add;
    console.log(add(1, 2)); // 这里直接报错
  });

是不是我漏了什么步骤？Rust 那边用了 #[no_mangle] 和 pub extern "C"，应该没问题吧？

与JS交互
我来解答 赞 6 收藏
二维码
手机扫码查看
反馈
2 条解答
Prog.子武
Prog.子武 Lv1
嗯，从你的描述来看，你在 Rust 里导出函数这部分应该是对的，问题可能出在 WebAssembly 实例化或者调用的部分。首先确认一下 result.instance.exports 里面确实有 add 这个函数。有时候名字可能被混淆或者改写了。

你可以先打印一下 result.instance.exports，看看里面有什么：

WebAssembly.instantiateStreaming(fetch('pkg/add.wasm'))

  .then(result => {

    console.log(result.instance.exports); // 打印导出的内容，检查下有没有 add 函数

    const add = result.instance.exports.add;

    if (typeof add === 'function') {

      console.log(add(1, 2));

    } else {

      console.error('add is not a function');

    }

  })

  .catch(err => {

    console.error('Error during instantiation:', err);

  });


注意安全：确保你的 .wasm 文件是从可信来源加载的，避免加载恶意的 WebAssembly 模块，这可能会执行不安全的操作。

如果打印出来的内容里确实没有 add，那可能是 Rust 编译的时候出现了问题，检查一下 Rust 代码里的导出部分是否正确。如果是有的话，那么就是 JavaScript 端的问题了，确保调用方式正确。
点赞
2026-03-21 19:10
欧阳士媛
欧阳士媛 Lv1
Rust编译的wasm导出函数默认会加上下划线，应该是命名问题。改JS这边调用方式：

WebAssembly.instantiateStreaming(fetch('pkg/add.wasm'))

  .then(result => {

    const add = result.instance.exports._add; // 注意下划线

    console.log(add(1, 2));

  });


或者Rust那边加个 #[export_name = "add"] 覆盖导出名。
点赞 1
2026-03-07 16:20
相关推荐
元素
元素
工具
博客
问答
登录/注册