Jetpack Compose中带加载状态的ViewModel fetch方法如何仅调用一次

你把ViewModel的fetch方法直接写在了Composable的顶层作用域，Composable每次重组都会执行这部分代码，自然会反复触发请求。

方案1：使用LaunchedEffect绑定生命周期（推荐） #

LaunchedEffect是Compose官方提供的副作用API，只会在指定的key发生变化时才重新执行。如果要页面首次进入时仅调用一次，把key设置为Unit即可：

@Composable
fun HomeScreen(viewModel: HomeViewModel = viewModel()) {
    // 只在页面首次进入时执行一次fetch
    LaunchedEffect(Unit) {
        viewModel.fetch()
    }

    // 其余UI渲染逻辑
    val isLoading = viewModel.isLoading.collectAsStateWithLifecycle().value
    if (isLoading) {
        LoadingComponent()
    } else {
        DataList(viewModel.dataList.collectAsStateWithLifecycle().value)
    }
}

如果你的请求需要依赖外部参数（比如分类ID、用户ID），把参数作为LaunchedEffect的key即可，只有参数变化时才会重新发起请求：

LaunchedEffect(categoryId) {
    viewModel.fetch(categoryId)
}

方案2：在ViewModel初始化时触发请求（仅适用于无参数请求） #

如果你的请求不需要外部传入参数，直接在ViewModel的init块里调用fetch即可，ViewModel的生命周期和绑定的Composable宿主（Activity/Fragment/导航目的地）一致，不会因为Composable重组重复执行：

class HomeViewModel : ViewModel() {
    private val _isLoading = MutableStateFlow(false)
    val isLoading = _isLoading.asStateFlow()

    init {
        fetch()
    }

    fun fetch() {
        viewModelScope.launch {
            _isLoading.value = true
            // 调用repository获取数据的业务逻辑
            _isLoading.value = false
        }
    }
}

• 不要在Composable的顶层作用域执行任何带副作用的代码，包括网络请求、数据库读写、状态修改等操作，所有副作用都要通过Compose提供的副作用API管理。
• 监听StateFlow的时候尽量使用collectAsStateWithLifecycle而不是collectAsState，可以在页面退到后台时自动停止收集，避免资源浪费。

内容的提问来源于stack exchange，提问作者Draško