[해외축구] 리그 매치 일정 (League Match Schedule) 페이징 하기

[MatchController.java - 리그 매치 일정 엔드 포인트]

//리그 별 매치 일정 검색 (leagueId 기반)
//page, pageSize 별로 캐싱
@GetMapping("/matches/league/{leagueId}")
@ResponseBody
@Cacheable(value = "leagueMatchesCache",
        key = "#leagueId + '_' + #pageable.pageNumber + '_' + #pageable.pageSize",
        unless = "#result == null or #result.isEmpty()")
public Page<MatchDto> getMatchesByLeagueId(@PathVariable Long leagueId, Pageable pageable) throws IOException, InterruptedException {
    String apiUrl = String.format("https://api.football-data.org/v4/competitions/%d/matches", leagueId);
    ResponseEntity<Map> response = getAPIResponse(apiUrl);
    List<MatchDto> matches = getMatchDtos(response);

    int start = (int) pageable.getOffset();
    int end = Math.min((start + pageable.getPageSize()), matches.size());

    PageImpl<MatchDto> matchDtos = new PageImpl<>(matches.subList(start, end), pageable, matches.size());
    return matchDtos;
}

 

스프링의 "Page" 인터페이스를 통해서, 컨트롤러 상에서 페이징을 하였다.

 

예시) "http://localhost:8080/matches/league/2021?page=4&size=20"

 

PageSize = 20 인, 프리미어리그(League Code = 2021) 의 경기 일정 다섯번째 페이지(페이지는 0번부터 시작) 를 가져온다.

 

[home.html - 中]

 

 

[main.js]

	//리그 별 매치 일정을 로드하는 함수
    function loadLeagueSchedule(leagueId, page) {
        var requestFixturesUrl = "/matches/league/" + leagueId; //리그 경기 일정 URL
        $.ajax({
            url: requestFixturesUrl + `?page=${page}&size=${pageSize}`,
            type: "GET",
            success: function(data) {
                //totalPages 추출
                currentTotalPages = data.totalPages;

                //schedule 업데이트
                updateSchedule(data);

                // "이전" / "다음" 페이지 버튼 활성화 여부 처리 함수
                updatePaginationControls(page, currentTotalPages);

                // 페이지 번호 정보 업데이트
                updatePageNumberInfo();
            },
            error: function(xhr, status, error) {
                if(xhr.status === 429){ // Too Many Requests
                    // 서버로부터 받은 응답 메시지를 사용자에게 알림으로 보여줌
                    var responseMessage = xhr.responseText;
                    alert("일시적으로 요청이 너무 많습니다. 잠시 후 다시 시도해 주세요. " + responseMessage);
                } else {
                    // 다른 종류의 에러 처리
                    console.error("Error fetching data: ", error);
                    alert("데이터를 가져오는 중 오류가 발생했습니다.");
                }
            }
        });
    }

1. 요청 URL : "http://localhost:8080/matches/league/{leagueCode}?page={pageNumber}&size={pageSize}" 을 통해, 페이징 조건을 맞춘 리그 매치 일정 데이터를 요청한다.

 

2. error : ERROR CODE - 429 는 " HttpClientErrorException.TooManyRequests " 이고, RestAPI 에서 단기간에 너무나 많은 요청이 올 경우 반환되는 오류코드이다. 

알람을 사용하여 해당 오류가 발생하면 View 단에 메시지를 반환한다.

 

 

 

[완료 화면]