TeaVM 中使用 Fetch API 发起 GET 请求的正确方式-js教程-PHP中文网

TeaVM 中使用 Fetch API 发起 GET 请求的正确方式

本文详解如何在 teavm 中安全调用浏览器原生 fetch api 实现异步 get 请求，包括 jsbridge 声明规范、回调接口的必要继承约束，以及更推荐的内置 xmlhttprequest 封装方案。

本文详解如何在 teavm 中安全调用浏览器原生 fetch api 实现异步 get 请求，包括 jsbridge 声明规范、回调接口的必要继承约束，以及更推荐的内置 xmlhttprequest 封装方案。

在 TeaVM 中发起 HTTP 请求时，不能使用 java.net 等 JVM 标准网络 API（因其无对应 JavaScript 运行时实现），必须通过 @JSBody 桥接浏览器原生 API。但直接声明 JavaScript 回调接口存在关键限制：所有作为 @JSBody 参数传递的 Java 接口，必须显式继承 JSObject ——这是 TeaVM 的 JS 对象互操作契约，否则编译器将报错 parameter has wrong type。

因此，修复你原始代码的关键是让 FetchCallback 实现 JSObject：

public interface FetchCallback extends JSObject {
    static FetchCallback create(Consumer<string> onSuccess, Consumer<string> onError) {
        return new FetchCallback() {
            @Override
            public void complete(String result) {
                onSuccess.accept(result);
            }

            @Override
            public void error(String message) {
                onError.accept(message);
            }
        };
    }

    void complete(String result);
    void error(String message);
}</string></string>

同时修正 @JSBody 方法声明（注意：static native 修饰符不可省略，且需确保参数顺序与 params 数组严格一致）：

Dang.ai

Dang.ai是一个AI工具目录集，已收集超过5000+ AI工具

下载

@JSBody(params = {"url", "callback"}, script = ""
    + "fetch(url)"
    + "  .then(r => r.ok ? r.text() : Promise.reject('HTTP ' + r.status))"
    + "  .then(text => callback.complete(text))"
    + "  .catch(err => callback.error(err.toString()));")
static native void fetch(String url, FetchCallback callback);

✅ 调用示例：

fetch("https://api.example.com/data", 
      FetchCallback.create(
          text -> System.out.println("Success: " + text),
          err -> System.err.println("Error: " + err)
      ));

⚠️ 注意事项：

JSObject 是 TeaVM 提供的空标记接口（marker interface），仅用于类型校验，不提供方法；
避免在 @JSBody 中拼接复杂逻辑；建议将错误处理（如 response.ok 判断）前置到 JS 层，提升健壮性；
fetch() 在旧版浏览器中可能不可用，若需兼容 IE，应改用 TeaVM 内置的 XMLHttpRequest。

? 更优实践：使用 TeaVM 官方封装
TeaVM 已为 XMLHttpRequest 提供完整、类型安全的 Java 绑定（位于 org.teavm.jso.ajax.XMLHttpRequest），无需手写 JS 桥接，语义清晰且兼容性更好：

XMLHttpRequest request = XMLHttpRequest.create();
request.setOnReadyStateChange(() -> {
    if (request.getReadyState() == XMLHttpRequest.DONE) {
        if (request.getStatus() == 200) {
            System.out.println("Response: " + request.getResponseText());
        } else {
            System.err.println("HTTP Error: " + request.getStatus());
        }
    }
});
request.open("GET", "https://api.example.com/data");
request.send();

该方式完全基于 TeaVM 运行时标准 API，无需额外 JS 编写，编译安全、调试友好，是生产环境的首选方案。