클라이언트 코드에서 ajax 요청 시 promise를 반환합니다.

[이영호]

아래는 Next js 서버코드입니다

export default async function handler(request,response){

    let recent = undefined
    if(recent == undefined)
    {
        try {
            recent = await fetch("https://외부 api 주소",{method:'GET'})
            let data = await recent.json()
            return response.status(200).json(data)
        }
        catch (e)
        {

        }
    }

}

이렇게 서버 코드 만들어 둔 뒤에 클라이언트 코드에서 ajax 요청 시 promise 를 반환합니다.

<div onClick={()=>{
    fetch("api/v1/article/recent", {method:'get'}).then(value => {
        const data = value.json()
        console.log(data)
    })}
}> 테스트
</div>

신기하게도 then 안에 async await을 넣어두면 올바르게 데이터를 가져옵니다.
<div onClick={()=>{
    fetch("api/v1/article/recent", {method:'get'}).then(async value => {
        const data = await value.json()
        console.log(data)
    })}
}> 테스트
</div>

아래 처럼 사용하는 것이 맞나요?
db 요청이나 외부 백엔드 요청이나 동작 방식은 같아 보이는데 저렇게 하지않으면 promise 를 반환하고 있습니다
강의에서는 너무 잘 되어서 어디서 틀렸는지 찾지 못하고 있습니다..

[이영호]

.then(value => value.json()) 이 부분까지 똑같이 하니 올바르게 동작하는 것을 확인했습니다.
이 부분 관련해서 좀 더 찾아보겠습니다!

꾸역꾸역 혼자서 찾아보다 안되어서 생각을 정리해서 질문을 하고 나면 그것 때문에 항상 해결이 되는것 같네요

[글쓴이]

글