jsp script async await 이용

카카오맵 데이터를 restController를 이용하여 받은 후 마커처리를 위한 작업.
데이터를 받기 전에 마커를 뿌리면 에러.

차이점

1. 함수 처음에 async 붙임.
   
2. 데이터를 가져올 때 비동기로 await로 가져옴 + try, catch로 에러처리
   
3. getdata함수를 promise로 리턴
   
   promise로 리턴을 하는데 매개변수가 두개의 콜백함수. 성공과 실패.

$.ajax({
	url:'',
    success:(result)=>{resolve(result)},
    error:(error)=>{reject(error)}
	})

위와같은 형식으로 리턴된다.

원래방식?

getdata의 매개변수로 콜백함수를 선언한다. 그리고 결과를 콜백함수에 담음.

getdata를 호출할 때 매개변수에 콜백함수를 입력하는데 데이터를 받을 변수를 넣는다고 생각하자. 그리고 for문과 마커 찍는 것을 getdata함수 안에서 로직 작성.
단순하게 리턴받을 getdata의 값을 callback으로 감싸서 온다고 생각

---

let makeKakaoMap2 = {

    init:()=>{
        var mapContainer = document.getElementById('map'),
            mapOption = {
                center: new kakao.maps.LatLng(37.5446638, 127.05649931),
                level: 5
            };
        var map = new kakao.maps.Map(mapContainer, mapOption);

        // 데이터 넣어서 포문 돌릴 위치 ==================================================================
        // 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다
        var positions = [];

        makeKakaoMap2.getdata((positions)=> {
            for (var i = 0; i < positions.length; i ++) {
                var markerPosition = new kakao.maps.LatLng( positions[i].latlng.lat, positions[i].latlng.lng);

                // 마커를 생성합니다
                var marker = new kakao.maps.Marker({
                    map: map, // 마커를 표시할 지도
                    position: markerPosition // 마커의 위치
                });
                // 마커에 표시할 인포윈도우를 생성합니다
                var infowindow = new kakao.maps.InfoWindow({
                    content: positions[i].content // 인포윈도우에 표시할 내용
                });
                // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
                // 이벤트 리스너로는 클로저를 만들어 등록합니다
                // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
                kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
                kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
            }
        });

// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
        function makeOverListener(map, marker, infowindow) {
            return function() {
                infowindow.open(map, marker);
            };
        }
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
        function makeOutListener(infowindow) {
            return function() {
                infowindow.close();
            };
        }
    },
    getdata:(callback)=>{
        $.ajax({
            url:'/givemarker',
            success:(result)=>{
                callback(result);

            }
        })
    }
}

기작성 코드

let makeKakaoMap3 = {

    init: async () => {
        var mapContainer = document.getElementById('map');
        var mapOption = {
            center: new kakao.maps.LatLng(37.5446638, 127.05649931),
            level: 5
        };
        var map = new kakao.maps.Map(mapContainer, mapOption);

        try {
            const positions = await makeKakaoMap3.getdata(); // 비동기적으로 데이터를 가져옴
            for (var i = 0; i < positions.length; i++) {
                var markerPosition = new kakao.maps.LatLng(positions[i].latlng.lat, positions[i].latlng.lng);
                var marker = new kakao.maps.Marker({
                    map: map,
                    position: markerPosition
                });
                var infowindow = new kakao.maps.InfoWindow({
                    content: positions[i].content
                });
                kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
                kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
            }
        } catch (error) {
            console.log("Error:", error);
        }

        // 인포윈도우를 표시하는 클로저를 만드는 함수입니다
        function makeOverListener(map, marker, infowindow) {
            return function() {
                infowindow.open(map, marker);
            };
        }
        // 인포윈도우를 닫는 클로저를 만드는 함수입니다
        function makeOutListener(infowindow) {
            return function() {
                infowindow.close();
            };
        }

    },
    getdata: () => {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: '/givemarker',
                success: (result) => {
                    resolve(result); // 비동기 작업이 성공한 경우 데이터 반환
                },
                error: (error) => {
                    reject(error); // 비동기 작업이 실패한 경우 에러 반환
                }
            });
        });
    },

};