나를 위해 정리하는 javascript의 promise, async/await 개념 !!!
비동기를 다루는 기본적이면서 많이 쓰이는 패턴은 ajax로 서버에서 데이터를 가져올 때 !
비동기에 대해 살펴보면서 promise, async, await 개념을 잡아보자
function delay(sec, callback) {
setTimeout(() => {
callback(new Date().toISOString()); //현재 시간
}, sec * 1000);
}
delay(1, (result) => {
//실행에 필요한 옵션을 파라미터로 넘기고, 실행이 끝났을 때 결과값을 받기위한 콜백을 넘긴다
console.log(1, result);
})
console.log("hello")결과: hello -> 현재시간
콜백지옥을 피하기 위해 promise 사용
function delayP(sec) {
return new Promise( (resolve, reject) => {
setTimeout(() => {
resolve(new Date().toISOString());
}, sec * 1000);
});
}
delayP(1).then((result) => {
console.log(1, result);
return delayP(1);
}).then((result) => {
console.log(2, result);
return delayP(1);
}).then((result) => {
console.log(3, result);
});then 메소드를 가지고 있는 것이 promise의 인스턴스
즉, delayP에서 만드는 것이 바로 promise의 인스턴스!
promise를 생성할 때 resolve(할 일을 다했을 때 호출), reject(오류 or 에러가 났을 때 호출)를 인자로 받는 콜백을 하나 넘긴다.
resolve를 통해서 결과값을 넘기게 되면 그 결과값이 then에서 받은 함수에게 넘겨진다.
then의 리턴값이 다음 promise의 결과값
async/await은 promise처럼 비동기를 다루는데 promise와 다른 사용법을 가지고 있고 promise를 이용한다.
async function myAsync() {
return 'async';
}
console.log(myAsync()); // Promise {<resolved>: "async"}함수 앞에 async를 붙이면 함수안에서 await을 사용할 수 있고
async를 붙이면 그 함수를 promise를 리턴하는 함수로 만들어준다.
promise에서는 비동기 연산을 다루는데, 끝나면 resolve함수를 실행하고, 실패하면 reject함수를 실행했다면
promise에서 resolve로 넘기는 값을 async에서는 return 하면 되고 reject을 하려면 함수안에서 에러를 throw해야 한다.
await은 기다린다! 무엇을?
promise가 resolve 되어서 결과값이 넘어올 때까지
await은 promise가 resolve 될 때까지 다음으로 넘어가지 않는다.
function delayP(sec) {
return new Promise( (resolve, reject) => {
setTimeout(() => {
resolve(new Date().toISOString());
}, sec * 1000);
});
}
async function myAsync() {
const time = await delayP(3); //time에는 현재 시간이 담겨있다.
console.log(time);
return 'async';
}
myAsync().then((result) => {
console.log(result); //"async"
});myAsync함수 내 time 변수에서
promise가 resolve 돼서 then에서 받는 결과값을.. 그 값을 마치 일반함수의 리턴값을 받듯이 사용할 수 있다.
delayP, myAsync(async함수) 모두 promise를 리턴한다.
호출해서 then을 통해서 resolve된 값을 받으므로 사용법이 같다.
참고로 promise를 리턴하는 함수 뿐만아니라 일반함수 앞에도 await 사용 가능하다.
그리고 나는 async/await이 있으니 promise는 사용하지 않는 줄 알았는데
서로 다른애가 아니라 서로 조합해서 사용하는 것이었다.
이것들을 사용하는 큰 목적은 코드를 짜기 쉽게하기 위해서이다 (내가 생각하는 로직을 표현할 때 promise로 표현하기 편한게 있고 async/await으로 표현하기 편한게 있음).
