Swift Concurrency 기반 페이징 + 병렬 비동기 호출

 

배경

 

데이터를 페이징 구조로 불러오고,

각 데이터 res값에 대해 별도로 비동기 상세 정보 API을 추가로 요청하고

화면에 출력하는 구조를 구현하려 했습니다.

 

여러 api가 동시에 호출되어야하는 상황입니다.

 

 

 

문제 원인과 해결

 

 

처음에는 단순하게 다음과 같은 구조로 처리했습니다.

func loadPage() async {
    let page = try await api.fetchPage()
    for item in page.items {
        let detail = try await api.fetchDetail(id: item.id)
        messages.append(detail)
    }
    listRelay.accept(messages)
}

 

 

이렇게 호출하였을때의 문제점은

요청이 순서대로 이루어지기 때문에 네트워크 대기 시간 누적 발생합니다

 

 

 

우선 이 문제를 해결하기 위해서는

api 호출을 병렬로 동시에 처리해줄 수 있는 구조로 변경해야합니다.

 

 

 

 

 

그래서

 

TaskGroup를 활용하여 여러 요청을 병렬로 동시에 처리해주도록 하였고,

 

let results = try await withTaskGroup { 
    for {
        group.addTask { 
            ...
            return ..
        }
    }
}

 

 

 

 

병렬로 받은 값들에 대해 순서를 보장해주기위해

api 호출 시점에 index를 부여해주었습니다.

 

 

let results = try await withTaskGroup {
            for (index, item) in page.items.enumerated() {
                group.addTask {
                    let detail = try await api.fetchDetail(id: item.id)
                    return (index, detail)
                }
            }
        }
        .sorted { $0.0 < $1.0 }
        .map { $1 }

 

 

그리고 index값으로 정렬하여

호출 순서대로 결과값들을 정렬해주었습니다.

 

 

 

그래서 이런식으로 수정하여 처음 코드에 대한 문제를 해결해주었습니다.

아래는 수정된 코드입니다.

 

@MainActor // model data race 방지
func loadAllPages() async {
    var token: String? = nil
    resetState()

    while !reachedEnd && !Task.isCancelled {
        guard !isLoading else { return }
        isLoading = true

        let page = try await api.fetchPage(token: token)

        let results = try await withTaskGroup {
            for (index, item) in page.items.enumerated() {
                group.addTask {
                    let detail = try await api.fetchDetail(id: item.id)
                    return (index, detail)
                }
            }
        }
        .sorted { $0.0 < $1.0 }
        .map { $1 }

        for message in results {
            messages.insert(message, at: 0)
        }

        listRelay.accept(messages)

        if page.hasMore {
            token = page.nextToken
        } else {
            reachedEnd = true
        }

        isLoading = false
    }
}

 

 

 

한번에 특정 날짜의 모든 메세지를 가져오도록 하기 위해

while로 계속 호출하도록 해주었고,

res 값에 hasMore이 false일때까지 호출하는 구조입니다

 

 

 

그리고 enumerated로 각 요청에 인덱스를 부여해

병렬 호출에 대한 response값의 순서를 재정렬해주었습니다

 

 

마무리

 

페이지는 차례대로, 페이지 안은 동시에, 정렬은 인덱스를 부여하여
비동기 리스트 페이징 구조를 구현하였습니다