들어가면서
Promise는 효율적인 코드 실행 방식에 대한 대비책으로서
자바스크립트라는 언어에서는 아주 중요한 기술 중에 하나라고 생각되는데
아쉽게도 그 속을 자세하게 알지 못하고 쓰는 경우가 많은 것 같다
(이렇게 포스팅을 쓰는 나도 사실 반도 모르는건 아닐까?)
하지만 생각지도 못하게 나는 최신 문법을 쓰고 있어
(비동기 처리 개념이 없는 채로 async, await 를 먼저 배움)
그 개념에 대해서 접근이 더 어려웠던거 같기도 하다
promise라는 개념은 동일 하되 쓰는 코드만 다른 방식이니
이번에도 바로 한번 시작해보자
함수 선언
함수의 선언은 아래와 같이 하면 된다!
(.then과 같은 개념이 async await로 바뀌었다고 생각하면 될 듯)
## javascript
const func = async () => {
await 비동기 작업
}비동기 작업과 await
비동기 작업을 수행하는 함수 내에서 실제 비동기 작업을 호출하고, 그 결과를 받아오기 위해 await 키워드를 사용합니다.
## javascript
async const fetchData() => {
let result = await someAsyncFunction();
console.log(result);
}async/await 코드 예시
const func1 = (num) => {
return new Promise((res)=>{
setTimeout(()=>{
res(num*3)
},3000)
})
}
const func2 = async (num) => {
let newNum = await func1(num)
console.log(newNum)
}
console.log(1)
func2(2)
console.log(3)
// 결과
// 1
// 3
// 6이렇게 .then과 같이 연산이 끝날때 까지 기다려주는(await) 함수가 완성 됩니다!
async/await 에러처리(try / catch)
그렇다면 오류가 생기거나 연산에 실패했을 경우에는?
조금은 번거로울 수 있지만 아래와 같이 try/catch 블록으로 세팅 해주면 됩니다!
## javascript
const func = async() => {
try {
let result = await someAsyncFunction();
console.log(result);
} catch (error) {
console.error('에러 발생:', error);
}
}또는 아래와 같이 간단히 표현하기도 합니다!
## javascript
const func = async() => {
try {
let result = await someAsyncFunction();
console.log(result);
} catch (err) {
console.error('에러 발생:', err);
}
}이런 느낌으로 위 코드에서 에러 발생시 어떻게 뜨는지 수정 및 결과를 볼까요?
(인위적인 오류 발생을 위해 res값을 그냥 주석처리 해보았습니다!)
const func1 = (num) => {
return new Promise((res,rej)=>{
setTimeout(()=>{
// res(num*3)
rej('error')
},3000)
})
}
const func2 = async (num) => {
try{
let newNum = await func1(num)
console.log(newNum)
}catch(error){
console.error('error message : ', error)
}
}
console.log(1)
func2(2)
console.log(3)
// 결과
// 1
// 3
// "error message : " "error"이렇게 에러메세지가 뜨는 것을 볼 수 있습니다!
그리고 앞서 배운 체이닝 처럼 후속 액션을 취할 수도 있습니다!
.then 으로 2차 액션 또는 에러 이후 액션을 취할 수 있었는데
여기서는 어떻게 취하면 될까요??(숙제 :D)
조금 더 더하기
이렇게 배우다 보면 가끔 거만해져서 제대로 쓰지 않는 경우가 생깁니다!
정말 완벽하게 코딩을 했는데(사실 완벽하지 않음)
정말 오류가 생길 구석이 없는데(완벽하지 않은게 오류)
이렇게 저렇게 슥삭 슥삭 오류를 찾다보니.. 앗?
Promise { <pending> }특정 값에 이렇게 값이 안들어 오는 것을 알 수 있습니다!
하지만 이제 우린 이게 무슨 뜻인지 알죠?
(전 진짜 이거 뜻도 모르고 찾지도 못해서 하루를 날린 적도 있습니다ㅜㅜ
따지고 보면 이건 사람의 실수이다 보니.. 에러로 인식이 안되는거라서 그렇습니다..
그리고 지금도 내일도 모레도.. 계속해서 맞이할테죠..)
바로 promise의 기술을 덜 써서 그렇습니다!!
promise의 pending상태는 아직 연산이 되지 못된 상태입니다!
즉.. 우리는 기다리려고 promise를 쓰고 있는데 기다려주지 않았다는 뜻..ㅋㅋ
이 경우는
.then()을 덜 썼거나, 사용하지 않았거나?
async는 썼지만 await는 쓰지 않은 경우가 많습니다!
꼭 조심해서 써주세요!(코드는 죄가 없습니다.. 제 손꾸락이 죄죠..)
마무리
이렇게 콜백함수부터 시작해서, promise, 그리고 새로운 기술까지
우리는 이제 당당하게 기다릴 수(?) 있습니다!
앞서 말한 바와 같이 알맞은 부분에 콜백함수와 Promise 체인 및 async/await를
사용하면 미친듯이 코드가 간결해지고 가독성이 생깁니다!(유지보수성은 덤)
(사실 미친듯이 이걸 사용해서 쪼개놓는게 무조건 좋은 것 같은 지금까지의 느낌입니다)
(근데 이것도 너무 심하면 호크룩스처럼.. 파괴해야하는데 보이지가 않는 경우도 생기지 않을까 걱정이 됩니다.. :D)
++
발돋움 중인 예비 개발자 입니다.
태클 및 의견 공유 언제나 환영 :D
