17 与JavaScript交互之调用WebAssembly函数

在之前的章节中，我们探讨了JavaScript与WebAssembly的基本交互方式。现在，我们将专注于如何从JavaScript调用WebAssembly函数，这样可以让我们更好地利用WebAssembly的性能优势。

WebAssembly模块的构建

在开始之前，我们需要确保我们已经有一个WebAssembly模块。假设我们用Rust编译了一个简单的WASM模块，该模块包含一个函数add，用于两个数的加法。

以下是用Rust编写的代码，并将其编译为WASM：

// src/lib.rs
#[no_mangle]
pub extern "C" fn add(a: i32, b: i32) -> i32 {
    a + b
}

编译Rust为WASM

我们可以使用wasm-pack工具将上述代码编译为WASM模块：

wasm-pack build --target web

编译后会生成一个WASM文件以及一个JavaScript文件来帮助导入和使用WASM模块。

在JavaScript中加载WebAssembly模块

首先，我们需要在JavaScript中加载生成的WASM模块。假设文件名为my_module_bg.wasm，我们可以使用WebAssembly.instantiate来加载它。

async function loadWasm() {
    const response = await fetch('my_module_bg.wasm');
    const bytes = await response.arrayBuffer();
    const { instance } = await WebAssembly.instantiate(bytes);
    return instance;
}

调用WASM函数

一旦WASM模块被加载并且实例化，我们便可以轻松调用模块中的add函数了。

以下是如何调用add函数的示例代码：

async function main() {
    const instance = await loadWasm();
    
    // 调用WASM中的add函数
    const result = instance.exports.add(5, 3);
    console.log(`5 + 3 = ${result}`); // 输出：5 + 3 = 8
}

main();

在上面的代码中，我们通过instance.exports.add来调用WASM模块中的add函数，并且传入了两个参数5和3，最后将结果打印到控制台。

错误处理

在实际应用中，我们需要考虑到可能的错误情况。在加载WASM模块时，可能会出现网络错误。我们可以通过try...catch语句来捕获错误。

async function loadWasm() {
    try {
        const response = await fetch('my_module_bg.wasm');
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const bytes = await response.arrayBuffer();
        const { instance } = await WebAssembly.instantiate(bytes);
        return instance;
    } catch (error) {
        console.error(`Failed to load WASM module: ${error.message}`);
    }
}

总结

到此为止，我们已经展示了如何在JavaScript中调用WebAssembly函数。我们通过构建一个简单的WASM模块（add函数），并利用WebAssembly.instantiate加载和调用它。这种方法让我们能够利用WebAssembly在性能密集的计算中提供的优势。

在下一篇文章中，我们将讨论如何从WebAssembly返回值，使得我们的WASM模块与JavaScript的交互更加丰富和深入。请继续关注！