Retrofit + LiveData 네트워크 통신 로딩(Loading), 에러(Error) 표시하기

Retrofit을 사용하면 네트워크 상황에 따라 데이터가 늦게 오는 경우(Loading)도 있고 못 오는 경우(Error)도 있다.

 

LiveData를 활용하면 간단한 코드로 이를 해결할 수 있다.

 

 

[순서]

 

1. status 변수(LiveData) 만들기

 

2. 네트워크 응답에 따라 status 값 정하기

 

3. status 변수 observe 하기.

 

 

 

 

 

1. status 변수 만들기

 

*ViewModel.kt

 

- enum class를 이용해서 상태 상수를 선언해주고

- status라는 변수를 LiveData로 만들어준다.

 enum class BlogApiStatus{LOADING, ERROR, DONE}

 private val _status = MutableLiveData<BlogApiStatus>()
 val status: LiveData<BlogApiStatus>
     get() = _status

 

 

 

2. 네트워크 응답에 따라 status 값 정하기

 

*ViewModel.kt

 

  private fun getArticleList(){
        coroutineScope.launch {
            var getArticlesDeferred = BlogApi.retrofitService.getArticles()
            try{
                _status.value = BlogApiStatus.LOADING   //기본 로딩 상태

                var listResult = getArticlesDeferred.await()
                _response.value = listResult.tistory.item.posts

                _status.value = BlogApiStatus.DONE  //성공시 완료 상태

            }catch (t: Throwable){
                //_response.value = "Failure: " + t.message
                _status.value = BlogApiStatus.ERROR //에러시 에러 상태
            }
        }
    }

 

 

 

3. fragment에서 status 변수 observe 하기

 

*BlogFragment.kt

 

viewModel.status.observe(this, Observer {
            when(it){
                BlogViewModel.BlogApiStatus.LOADING -> {
                    binding.statusText.setText("로딩중..")
                    binding.statusText.visibility = View.VISIBLE
                }
                BlogViewModel.BlogApiStatus.ERROR -> {
                    binding.statusText.setText("네트워크 에러")
                    binding.statusText.visibility = View.VISIBLE
                }
                BlogViewModel.BlogApiStatus.DONE -> {
                    binding.statusText.visibility = View.GONE
                }
            }
        })

 

 

*fragment_blog.xml

 

      <TextView
            android:id="@+id/statusText"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="20sp"
            android:gravity="center"
            android:background="@color/colorPrimary"
            android:visibility="invisible"
            />

 

- ImageView를 활용하면 더욱 직관적인 UI를 만들 수 있다.

 

 

 

 

*참고

https://www.youtube.com/watch?v=AObrHYaahlk&feature=emb_logo