使用wasm-bindgen导出Rust Redis计数函数，JS导入报错求助

一、修复函数导入错误 #

你遇到的导出名称错误，是因为wasm-pack build --target web生成的模块采用了默认导出+初始化函数的结构，并非直接导出单个函数。修改JavaScript代码即可解决：

import init, { increment_counter } from "./pkg/increment.js";

const counterElement = document.getElementById("counter");

async function updateCounter() {
  // 必须先初始化Wasm模块
  await init();
  const count = increment_counter();
  counterElement.textContent = count;
}

updateCounter();

如果生成的increment.js结构特殊（比如仅默认导出初始化函数），也可以用这种写法：

import wasmModule from "./pkg/increment.js";

const counterElement = document.getElementById("counter");

async function updateCounter() {
  const wasm = await wasmModule();
  const count = wasm.increment_counter();
  counterElement.textContent = count;
}

updateCounter();

二、解决浏览器Wasm无法连接Redis的核心问题 #

即使修复了导出问题，你的代码依然会在浏览器中崩溃——浏览器环境不允许WebAssembly直接发起TCP连接，Redis的TCP协议无法在前端环境中使用，这是浏览器安全策略的限制。

正确架构方案 #

需要通过后端服务做中间层，由后端连接Redis并处理计数逻辑，前端通过HTTP请求调用后端接口：

1. 后端示例（Rust Axum）

use axum::{routing::get, Router};
use redis::{Client, Commands};
use std::net::SocketAddr;

#[tokio::main]
async fn main() {
    let client = Client::open("redis://127.0.0.1/").unwrap();
    let app = Router::new()
        .route("/increment", get(increment_handler))
        .with_state(client);

    let addr = SocketAddr::from(([127, 0, 0, 1], 3000));
    axum::Server::bind(&addr)
        .serve(app.into_make_svc())
        .await
        .unwrap();
}

async fn increment_handler(client: redis::Client) -> String {
    let mut con = client.get_connection().unwrap();
    let key = "counter";
    let value: i32 = con.get(key).unwrap_or(0);
    let new_value = value + 1;
    con.set(key, new_value).unwrap();
    new_value.to_string()
}

2. 前端修改后的JavaScript

const counterElement = document.getElementById("counter");

async function updateCounter() {
    try {
        const response = await fetch("http://localhost:3000/increment");
        const count = await response.text();
        counterElement.textContent = count;
    } catch (err) {
        counterElement.textContent = "请求失败: " + err.message;
    }
}

updateCounter();

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