[JavaScript] axios 반환값이 undefined이 나올때

행맨 게임을 만들기위해 API를 이용해 랜덤 단어를 가져오는 부분을 알아보고 있었다.

그런데 통신하여 단어를 가져오는건 잘 되는데

출력을하면 undefined만 뜨는것이다... 여기에 2가지 문제를 겪었고 이해했다.

처음 API를 써보는거라 바보 같았지만 꼭 짚고 넘어가야할 부분이였다.

 

첫번째 문제

async function getPuzzle() {
    axios.get('https://puzzle.mead.io/puzzle?wordCount=1')
    .then((result) => {
        console.log('성공:', result.data.puzzle)
        return result.data.puzzle
    })
}

getPuzzle().then(console.log)

then으로 가져온것을 출력해보아도 잘 나오지만

반환 받은 결과를 출력했더니 undefined가 나온다.

 

해결하지 못하고 검색을 해봤더니 나와 같은 상황을 겪은 사람이 있었다.

 

axios의 호출로 값을 리턴했지만 그 값을 받는 함수에게 전달하지 않을 것이였다..

axios 앞에 return을 붙여줌으로써 값을 정상적으로 출력할 수 있었다...

 

두번째 문제

async function getPuzzle() {
    return axios.get('https://puzzle.mead.io/puzzle?wordCount=1')
    .then((result) => {
        return result.data.puzzle
    })
}

let word = getPuzzle()
console.log(word)

getPuzzle()의 결과를 출력했더니 원하는 단어가 나오는것이 아니라

pending 상태의 프로미스가 나오는것이다.

 

여기에는 두가지를 생각해야 했었다.

충분한 시간을 가지고 출력을 한다면 fulfilled 상태를 받아올 수 있다는것.

처음 pending 상태의 프로미스가 나왔던것은 비동기 처리를 해주지 않아서 그렇다.

단어를 가져오는데 시간이 걸리기에 먼저 출력을 한다.

그래서 가져오기도 전에 출력을하니 pending 상태가 나오는것이다.

 

이제 시간을 충분히 가지면 정상적으로 처리가된 프로미스가 나온다.

하지만, 나는 결과값을 출력하기 원하는데 프로미스가 나온다.

 

 

getPuzzle()
    .then((result) => {
        console.log(result)
    })

이렇게 getPuzzle()이 정상적으로 처리가 끝나면 출력이 되게 수정을하면된다.

만약, 변수에 할당하기를 원한다면

 

 

아래처럼 코드를 작성해야한다.

async function getWord() {
    let word = await getPuzzle()
    console.log(word)
}

getWord()