기존 콜백함수 형태

예시: XMLHttpRequest()를 통해 JSON 형태로 받아온 세계 국가들에 대한 정보를 파싱하여, 국가 코드를 넣으면 국가 풀네임으로 바꿔주는 콜백함수

const getCountryDetails = (countryCode, callback) => {
    const request = new XMLHttpRequest()
    request.addEventListener('readystatechange', (e) => {
        if (e.target.readyState === 4 && e.target.status === 200) {
            const data = JSON.parse(e.target.responseText)
            const country = data.find((country) => country.alpha2Code === countryCode)
            callback(undefined, country) //에러, 데이터
        } else if (e.target.readyState === 4) {
            callback('An error has taken place') //(에러, 데이터)
        }
    })
    request.open('GET', 'https://restcountries.eu/rest/v2/all')
    request.send()
}

위의 콜백함수를 호출해보면

getCountryDetails("KR", (error, country) => {
  if (error) {
    console.log(`Error: ${error}`)
  } else {
    console.log(`Country name: ${country.name}`)
  }
})
//Korea (Republic of)

프로미스 형태로 변환한 결과

const getCountry = (countryCode) => new Promise((resolve, reject) => {
    const request = new XMLHttpRequest()
    request.addEventListener('readystatechange', (e) => {
        if (e.target.readyState === 4 && e.target.status === 200) {
            const data = JSON.parse(e.target.responseText)
            const country = data.find((country) => country.alpha2Code === countryCode)
            resolve(country)
        } else if (e.target.readyState === 4) {
            reject('A country name error has taken place')
        }
    })

    request.open('GET', 'https://restcountries.eu/rest/v2/all')
    request.send()
})

간단히 출력해보면

getCountry('KR').then((country) => {
  console.log(country.name) //Korea (Republic of)
}, (err) => {
  console.log(`Error: ${err}`) //Error: A country name error has taken place
})

The first function is called when promise is resolved, and the second one is called when rejected.

프로미스가 성공적으로 이행되는 경우 정상적으로 country 데이터에 접근할 수 있으므로 첫번째 함수인 (country) => {console.log(country.name)} 호출, 링크가 잘못되거나 데이터에 문제가 있을 경우 리젝되므로 두번째 함수인 (err) => {console.log(Error: ${err})}) 호출.