Compose Web中使用Ktor Client遇协程异步问题求助

核心问题梳理 #

• 直接在Input的onInput回调里调用挂起函数：回调不属于协程体，触发“Suspend function can be called only within a coroutine body”错误
• 用runBlocking包裹：JS环境默认不支持runBlocking，导致“Unresolved reference: runBlocking”错误
• 用GlobalScope.launch或原生JS代码：JS环境协程依赖配置不全，引发Kotlin相关依赖找不到的致命错误

正确实现方案 #

1. 补全必要依赖 #

在项目的build.gradle.kts（或build.gradle）中添加Ktor Client和JS协程适配依赖：

dependencies {
    // Compose Web核心依赖
    implementation(compose.web.core)
    implementation(compose.runtime)
    
    // Ktor Client核心及JS适配
    implementation("io.ktor:ktor-client-core:2.3.3")
    implementation("io.ktor:ktor-client-content-negotiation:2.3.3")
    implementation("io.ktor:ktor-serialization-kotlinx-json:2.3.3")
    implementation("io.ktor:ktor-client-js:2.3.3")
    
    // JS环境协程依赖
    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3")
    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-js:1.7.3")
}

2. 使用Compose绑定的协程作用域 #

Compose Runtime提供的rememberCoroutineScope会和Composable组件生命周期绑定，是替代GlobalScope的安全方案：

@Composable
fun ShortenerInput() {
    // 获取与当前Composable绑定的协程作用域
    val coroutineScope = rememberCoroutineScope()
    var inputText by remember { mutableStateOf("") }
    
    Input(
        value = inputText,
        onInput = { newValue ->
            inputText = newValue
            // 在协程作用域内调用挂起函数
            coroutineScope.launch {
                val result = shorterCall(inputText)
                // 处理请求结果，比如更新UI状态
                println("请求结果：$result")
            }
        }
    )
}

// Ktor Client挂起函数示例
suspend fun shorterCall(url: String): String {
    val client = HttpClient(Js) {
        install(ContentNegotiation) {
            json()
        }
    }
    return try {
        val response = client.get("https://your-api-domain.com/shorten") {
            parameter("url", url)
        }
        response.body()
    } catch (e: Exception) {
        "请求失败：${e.message}"
    } finally {
        client.close()
    }
}

3. 规避不兼容的API #

• 禁用GlobalScope：JS环境下使用GlobalScope易引发内存泄漏，且不受Compose生命周期管控
• 放弃runBlocking：该API是JVM环境下的线程阻塞工具，JS环境无对应实现，必然报错

额外注意事项 #

• 确保Ktor Client与协程版本兼容，避免依赖冲突
• 处理跨域问题：若API与前端域名不一致，需后端配置CORS规则
• 捕获请求异常：避免网络错误导致应用崩溃

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