어떤 개념인지 이해는 되는 것 같은데 아직 실제 코드로 작성하기가 어렵다...
: 함수의 전달인자로 넘겨지는 함수
필요에 따라 Synchronous callback / Asynchronous callback으로 실행할 수 있다.
비동기 함수의 순서를 제어하고 싶을 때 callback을 이용한다.
//1. Synchronous callback
function printImmediately(print) {
print();
}
printImmediately(() => console.log('sync callback')); //동기
//즉시 출력
//2. Asynchronous callback
function printWithDelay(print, timeout) {
setTimeout(print, timeout)
}
printWithDelay(() => console.log('async callback'), 2000); //비동기
//2초 뒤 출력
: web API
지정 시간(ms) 후에 callback 함수가 실행된다.
const youngTime = setTimeOut(() => console.log('young'), 1000);
//1초 뒤 young 출력
setTimeout 타이머를 종료한다.
clearTimeout(youngTime);
지정 시간의 간격으로 callback함수를 반복적으로 실행한다.
const sayHi = setTimeout(() => console.log('Hi!'), 2000);
//2초마다 Hi! 출력
setInterval 타이머를 종료한다.
clearInterval(sayHi);
: 하던 일이 끝나고 다음 일을 시작한다.
요청에 대한 결과가 동시에 일어난다.
일에 대한 순차적 실행 (synchronous)
: 요청에 대한 결과가 동시에 일어나지 않고 딜레이 된다.
요청에 blocking이 없다.
응답이 비동기적으로 이루어진다. (asynchronous)
: JavaScript asynchronous operation에서 콜백함수 대신에 사용할 수 있는 object
Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. 기본적으로 promise는 함수에 콜백을 전달하는 대신에, 콜백을 첨부하는 방식의 객체입니다. -mdn
: promise의 실행 상태
수행중일 때 pending
완료되면 fulfilled
오류가 있으면 rejected
프로미스를 만든 순간부터 "executor runs automatically"
성공할 경우 resolve(...)
을 호출하고, 실패할 경우 reject(...)
을 호출한다.
const firstPromise = new Promise((resolve, reject) => {
//doing some heavy work (network, read files)
console.log('doing something...');
setTimeout(() => {
resolve('youngs velog')
}, 2000)
});
const secondPromise = (string) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(string)
resolve()
},1000)
})
};
firstPromise.then(console.log)
>youngs velog //2초 뒤 출력
const printAll = () => {
secondPromise('hi')
.then(() => {
return secondPromise('hi!!')
})
.then(() => {
return secondPromise('hi!!!')
})
}
printAll()
.then()
다음 task로 넘어갈 수 있게 한다.
promise가 정상적으로 수행된다면 resolve에서 가져온 value가 parameter로 들어온다. (성공적인 케이스를 다룬다.)
.then(resolve에서 가져온 value에 대해 실행할 함수)
firstPromise()
.then(value => {
console.log(value)
return nextPromise()
});
.catch()
error 케이스를 다룬다.
마지막 promise chain 뒤에, 또는 원하는 task 바로 뒤에 작성하여 에러에 대응할 수 있다.
.catch(error => {...})
promise()
.then(...)
.catch(error=> {
console.log(error)
});
.finally()
promise.finally
:성공, 실패와 상관 없이 마지막에 이루어지는 기능
promise.finally (() => {console.log('finally')};
async
, await
(syntactic sugar)async
:function 앞에 작성하여 function을 promise로 변환해준다.
const result = async () => {...}
async function result() {...}
await
: promise를 동기적으로 실행되는 것처럼 보이게 한다.
해당 promise가 종료된 후에 다음 내용을 실행한다.
const result = async () => {
const one = await firstPromise();
console.log(one);
...
}
result();
Promise.all([함수, 함수2 ...]) :병렬적으로 연결
Promise.race([함수, 함수1...]) : 가장 먼저 수행이 끝나는 함수 출력