Jetpack Compose导航返回Composable时如何避免重复调用API

你遇到的重复请求问题根源是：跳转到EpisodeScreen时DetailScreen会退出组合，返回时DetailScreen重新进入组合，key为Unit的LaunchedEffect每次进入组合都会执行一次，因此重复触发了API调用。以下是3种可行的解决方式，按推荐优先级排序：

方案1：ViewModel层做请求幂等控制（最推荐） #

把请求逻辑的判断放到ViewModel内部，只要已有缓存数据就不重复发起请求，这种方式逻辑内聚，也兼容同一个页面传入不同ID的场景：

1. 修改DetailViewModel代码，增加缓存判断：

@HiltViewModel
class DetailViewModel @Inject constructor(/* 你的依赖注入 */) : ViewModel() {
    private val _characterDetail = MutableStateFlow<CharacterDetail?>(null)
    val characterDetail: StateFlow<CharacterDetail?> = _characterDetail.asStateFlow()

    fun getCharacterDetail(id: Int) {
        // 已有数据直接返回，不重复请求
        if (_characterDetail.value != null) return
        viewModelScope.launch {
            // 原有请求逻辑
            val result = yourApi.getCharacterDetail(id)
            _characterDetail.value = result
        }
    }
}

2. 把DetailScreen中LaunchedEffect的key改为id，避免ID变更时不刷新数据：

LaunchedEffect(key1 = id) {
    viewModel.getCharacterDetail(id)
}

这种方式下就算LaunchedEffect重复执行，ViewModel内部的判断也会拦截无效请求。

方案2：绑定LaunchedEffect的key到ViewModel实例 #

因为Navigation Compose的回退栈不会销毁上一层页面的ViewModel实例，只要把LaunchedEffect的key改为viewModel，就只会在第一次进入页面时执行一次请求，返回时因为ViewModel实例没有变化，不会重复触发：

LaunchedEffect(key1 = viewModel) {
    viewModel.getCharacterDetail(id)
}

注意：该方案仅适用于同一个DetailScreen入口不会传入不同ID的场景，如果存在ID变更的需求，优先选方案1。

方案3：Composable层加请求标记（临时方案） #

如果不想修改ViewModel代码，可以在Composable层用rememberSaveable存储请求状态，只有没请求过时才发起调用：

var hasRequested by rememberSaveable { mutableStateOf(false) }
LaunchedEffect(key1 = id) {
    if (!hasRequested) {
        viewModel.getCharacterDetail(id)
        hasRequested = true
    }
}

该方案的缺陷是进程被系统杀死重建后标记会丢失，还是会重复请求，仅适合临时调试使用。

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