나홀로 js // async await 데이터 넘기고 받기

개념을 다시 잡기위해 다시 포스팅 해본다.

 

 

async함수가 프로미스를 리턴하는데 프로미스는 resolve로 데이터를 보내고

.then에서 그 데이터를 쓸 수 있다.

근데 async는 프로미스를 리턴하는데 앞선 delay함수 예시에서는 직접 만든 프로미스를

리턴해버렸다... 그래서 async함수에서 가공한 데이터는 어떻게 resolve하는지 헷갈렸다.

 

# delay함수

async function delay(ms){

    return new Promise((resolve, reject)=>{

        setTimeout(()=>{resolve()},ms)

    })

}

앞서 예시로 배운 delay함수이다.

리턴으로 직접적으로 promise를 해준다.

 

async function delay(ms){

    return new Promise((resolve, reject)=>{

        setTimeout(()=>{resolve('바보')},ms)

    })

}

delay(1000).then((data)=>console.log(data))

이렇게 하면 .then이 바보값을 받아와서 쓸 수 있다.

 

 

근데 이렇게 프로미스를 새로 리턴하지 않고 할 수 없나? 이게 내 궁금증이었다.

 

 

# 비슷한 프로미스 리턴 예시

async function delay(ms){

    return new Promise((resolve, reject)=>{

        setTimeout(()=>{resolve('바보')},ms)

    })

}

 

let fuc1 = async (ms, message)=>{

    await delay(ms)

    return Promise.resolve(message)

}

fuc1(2000, '안녕?').then((data)=>console.log(data))

이 코드도 delay함수와 fuc1함수 모두 프로미스로 리턴을 해주었다.

 

 

 

 

## promise를 직접적으로 리턴하지 않는 async함수(프로미스를 리턴하는거임)

let fuc2 = async ()=>{

    await delay(2000)

    return '바보'

}

 

fuc2().then((data)=>{console.log(data)}).then(()=>(console.log('끝'))).then(()=>{console.log('진짜끝')})

fuc2라는 async함수는 바보라는 스트링을 리턴한다.

그럼 fuc2는 바보라는 스트링이 되서 아래코드처럼 then이 작동되지 않아야하는데

작동이 잘되고 data로 바보라는 스트링을 받아올수도 있다.

 

즉 정확하는 async함수 다음에는 프로미스가 리턴되는데 그 프로미스의 

resolve값이 저 바보라는 스트링이 되는것이다.

 

콘솔에 fuc2()를 찍어봐도 원래 일반함수는 '바보'라는 스트링이 나오겠지만

이건 프로미스가 나온다.