• 동기(Sync)와 비동기(Async)에 대한 개념
• 일단 자바스크립트는 비동기적으로 실행.
• 동기로 실행된다라고 함은, 먼저 실행된 코드의 결과가 나올때까지 대기하는 것을 의미
• 비동기로 실행단되라는 것은, 실행된 순서와 관계 없이 결과가 나오는 것을 말함.
• 병렬처리랑은 헷갈리면 안됨.
• Blocking Model & Non-Blocking Model
• 블라킹 모델이란, 코드의 실행이 끝나기 전까지 실행 제어권을 다른 곳에 넘기지 않아 다른 작업을 하지 못하고 대기하는 것을 말한다.
• 논블라킹 모델이란, 코드의 실행이 끝나지 않아도 실행 제어권을 다른 곳에 넘겨 다음 코드가 실행될 수 있는 것을 말함.
• 동기, 비동기와는 뭐가 다른가?
• 제어권을 넘기면(논블라킹) 다른 코드도 실행될 수 있으므로 비동기 처리가 가능하지만
• 제어권을 넘기지 않으면(블라킹) 비동기 처리가 가능한 환경이어도 비동기 처리가 불가능
• 즉, 비동기 처리가 가능하려면 논블라킹 모델이어야 한다.
• 결론적으로 자바스크립트는 비동기와 논블라킹 모델을 가지고 있다.
function first() {
console.log('First');
}
setTimeout(first, 1000); // 1000ms(1초) 뒤에 first 함수를 실행해준다.
console.log('Middle');
console.log('Last');
// Print: Middle
// Last
// First• 위 코드를 보면 first라는 함수는 1초는 기다렸다가 first를 출력하는데 그 밑의 코드들이 그걸 안기다리기 때문에 first가 가장 마지막에 출력됨
• Promise
• 자바스크립트에서 비동기 처리를 동기로 처리할 수 있게 돕는 객체 유형
• const result = new Promise( (resolve, reject) => { // 명령문});
• Promise 안에는 함수만 인자로 올 수 있고, 그 함수의 인자로 resolve, reject가 주입됨. (리졸브 리젝트도 필수로 써넣어야하고 얘네도 함수인듯? 안에서 호출하네)
• 프로미스는 반드시 3가지 상태를 지니며, 대기(Pending) 상태가 아니면 Promise의 연산이 이미 끝난 상태로 볼 수 있음.
• 대기(Pending):이행하거나 거부되징 ㅏㄶ은 초기 상태.
• 이행(Fulfilled):연산이 성공적으로 완료됨.
• 거부(Rejected) : 연산이 실패함.
const timerPromise = new Promise((resolve, reject) => { // 이곳에 정의된 함수가 executor
setTimeout(() => {
console.log('First');
resolve();
}, 1000);
});
// 이 시점에서 timerPromise는 Fulfilled Promise라고 부를 수 있다.
timerPromise.then(() => {
console.log('Middle');
console.log('Last');
});• resolt, 혹은 reject가 되기전까지는 Pending 상태라고 부름.
• 되면은 이행이나 거부 두개의 상태로 들어감.
resolve가 실행되면 이행상태. reject가 실행되면 거부상태
• 프로미스 객체는 then을 쓸 수 있음. 프로미스가 풀필드 상태일 때만 실행될 수 있는게 then
const errorPromise = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('First');
reject('Error!!'); // 직접 reject를 실행하면 프로미스에서 에러가 발생한것으로 간주됩니다.
}, 1000);
});
errorPromise.then(() => {
console.log('Middle');
console.log('Last');
}).catch((error) => {
console.log('에러 발생!', error);
});
// Print: '에러 발생! Error!!'• 직접 reject를 실행하면 프로미스에서 에러가 발생한 것으로 간주됨.
• reject 됬을 땐 then이 실행안되고 catch가 실행. (reject의 함수인자로는 에러발생시 문구를 넣나봄. catch에서 콘솔로그해서 그걸 인자로 넣어서 출력하고)
1 //const firstPromise = Promise.resolve('First');
2 const firstPromise = new Promise((resolve, reject) => {
3 resolve('First');
4 });
5 firstPromise.then((value) => {
6 console.log(value);
7 });
8 // Print: 'First'• 첫째줄이랑 둘째줄은 같은 코드.
• 그리고 5~7줄도
• firstPromise.then(console.log);
• 이렇게 쓸 수도 있음. console.log에 괄호를 쓰지 않고 함수 자체를 그대로 then에 넘긴거
• 비동기 함수
• 형태는 앞에 async 붙이는 거만 빼면 일반함수랑 똑같이 생김.
모든 비동기 함수는 전부 promise를 반환. 어떤 값을 리턴하면 그걸 promise로 감싸져서 리턴함.
근데 안에서 promise로 리턴하면 그건 그대로 리턴함.
• await 연산자
• async 함수 안에서만 사용 가능. (지금은 이런데 미래에는 아니어도 사용가능하게 바뀔거라고함)
async function 함수이름() {
const result = await 'Test!';
console.log(result);
}
함수이름();
// Print: 'Test!';• 뒤에가 promise가 아니어도 쓸 수 있음 그럴땐 그냥 그대로 넘겨줌.
