Rust WASM如何等待Future完成以控制异步执行顺序

问题描述 #

我编写了一段Rust WASM代码：异步函数request_data会调用任意API并在控制台打印Promise解析结果；为验证执行顺序，我在调用该函数前后添加了日志输出。未等待异步函数时，控制台输出顺序为Before、After、异步调用结果。

我期望main函数等待Future解析完成后再打印"After"，尝试使用futures的block_on方法却陷入无限等待，仅输出Before。需要调整main函数，使控制台输出顺序变为Before、异步调用结果、After。

初始代码 #

use wasm_bindgen::prelude::*;

#[wasm_bindgen(inline_js = "export async function request_data() { console.log(await <some_async_call>) }")]
extern {
    pub async fn request_data();
}

#[wasm_bindgen(inline_js = "export function log(text) { console.log(text) }")]
extern {
    pub fn log(text: &str);
}

#[wasm_bindgen]
pub fn main() {
    log("Before");
    request_data();
    log("After");
}

尝试的代码（存在问题） #

use wasm_bindgen::prelude::*;
use futures::executor::*;

#[wasm_bindgen(inline_js = "export async function request_data() { console.log(await <some_async_call>) }")]
extern {
    pub async fn request_data();
}

#[wasm_bindgen(inline_js = "export function log(text) { console.log(text) }")]
extern {
    pub fn log(text: &str);
}

#[wasm_bindgen]
pub fn main() {
    log("Before");
    block_on(request_data());
    log("After");
}

解决方案 #

核心原因 #

在浏览器WASM环境中，futures::executor::block_on会阻塞主线程，而浏览器的异步任务（如API请求）依赖事件循环处理回调。阻塞后事件循环无法推进，导致request_data的异步任务永远无法完成，陷入无限等待。

修正代码 #

需要使用wasm-bindgen-futures库的spawn_local方法，将异步任务提交到浏览器事件循环中执行，避免阻塞主线程，同时保证执行顺序。

首先在Cargo.toml中添加依赖：

[dependencies]
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4"

然后修改代码：

use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::spawn_local;

#[wasm_bindgen(inline_js = "export async function request_data() { console.log(await <some_async_call>) }")]
extern {
    pub async fn request_data();
}

#[wasm_bindgen(inline_js = "export function log(text) { console.log(text) }")]
extern {
    pub fn log(text: &str);
}

#[wasm_bindgen]
pub fn main() {
    log("Before");
    // 将异步逻辑包裹在spawn_local中，确保request_data完成后再打印After
    spawn_local(async {
        request_data().await;
        log("After");
    });
}

执行效果 #

控制台输出顺序会变为：Before → 异步调用结果 → After

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