[JS] callback함수 결과값 return

오전에 카카오맵을 재미삼아 건드려보다가 처음 보는 패턴이 필요하였다.

카카오맵엔 위도,경도값으로 주소를 조회하는 api를 제공해주는데

일반적인 함수처럼 return이 오는 것이 아니라 callback함수에 return 되는 형태이다.

geocoder.coord2Address(lat, lng, (result:any, status:any) => {
    ...
  })

대충 이런 형태인데 3번째 인자에 function이 아닌 Promise등 다른 type의 argument가 들어가면 function이 아니라는 이유로 에러가 발생한다.

그래서 새로운 Promise 객체를 만든 뒤 callback함수에서 resolve를 호출하고 해당 Promise객체를 await하는 형태로 변경하였다. 전반적인 코드는 아래와 같다.

let road_address = await this.getAddress(Lat, Lng)
...
...

getAddress(lat:number, lng:number):Promise<any>{

    let geocoder = new window.kakao.maps.services.Geocoder();

    let callbackPromise = new Promise((resolve, reject) => {
      geocoder.coord2Address(lat, lng, (result:any, status:any) => {
        if(status==='OK') resolve(result[0].road_address)
        else return resolve('')
      })
    })
    return callbackPromise
  }

 getAddress를 Promise객체로 선언하고 kakao map api를 새로운 Promise객체 안에서 호출하고 resolve를 통해 callback함수에서 반환받았다.

그후 getAddress함수를 호출할때 await/then 을 통해 결과값을 받아 사용하면 된다.