Section 9. Async JS

Udemy - JavaScript: The Advanced Concepts

Section 9. Async JS

callback

move(100, 'left', function(){
    move(200, 'right', function() {
    	move(300, 'up', function() {
        	...콜백지옥...
        });
    });
});

Promise

• ES6 등장

• A promise is an object that may produce a single value sometime in the future either a resolved value or a rejected value

• 3가지 상태 : fullfilled, rejected, pending

Promise의 생성

const promise = new Promise((resolved, rejected) => {
	if(good) resolved('done');
	else rejected('error');
});

promise
    .then(res => { ... })
    .catch(err => { ... })

생성자에는 resolved, rejected를 받는 함수가 들어가는데
막상 실행할때 그런걸 언제 넣어줬냐!! 라는게 항상 궁금했다

그런데

1) .then(successCallback, failCallback)이렇게 써도 되는걸
2) .then(successCallback)처럼 성공 케이스 하나만 쓴 것이고
3) .catch(failCallback) 은 사실 .then(null, failCallback) !!!!!

// Callbackk to Promise

method(data, successCallback, failureCallback);
>>
method(data).then(successCallback, failureCallback);
>>
method(data).then(successCallback).catch(failureCallback);

promise chaining

method
	.then()
	.then()	//앞의 then 작업 끝나고 시작
	.catch() //이전에 발생하는 reject만 모두 잡음, 오류없음 통과
	.then() //catch가 불렸다면 catch()의 return 받아서 실행
    .finally() //성공실패 상관없이 마지막 한번 호출, 들어오는 파라메터 없음
	...

Promise.all / race / allSettled

• all : 모두 끝날때까지 기다림 (하나라도 실패하면 catch넘어감)
• race: 먼저 들어오는 한개에 반응(성공이든 실패든)
• allSettled : 모두 끝날때까지 기다림 (실패 발생해도 다 기다림), ES2020 등장

promise.all(promiseArr).then(console.log);
// [결과1, 결과2, ...]

promise.race(promiseArr).then(console.log);
// 결과n

Promise.allSettled(promiseArr).then(resArr => resArr.forEach(res => console.log(res.status)));
// ['fullfilled', 'rejected',...]

res: {
  status: 'fullfilled' | 'rejected';
  value: (fullfilled인 경우 들어옴)
  reason: (rejected인 경우 들어옴)
}

Async/Await

• ES8 등장
• 더 자유롭게 표현 가능
• 오류는 try/catch로 잡아야함

async function foo(){
	const value = await promise1();	//pause
	await promise2(value); //pause
}

Job Queue

Promise는 늦게 등장한 JS의 native객체임
JS runtime에서 제공하는 web API와는 다른것으로, 별도의 Q가 필요해짐
그래서 Job Queue가 추가되었고, callback Queue보다 처리 우선순위가 높음
call stack 종료 -> Job Q 처리 -> callback Q 처리

forEach, Promise.all, for await ... of

forEach : 병렬실행, 전체완료 기다리지않음
Promise.all : 병렬실행, 전체완료 기다림
for await of : 순차실행, 전체완료 기다림

Web Worker

쓰레드처럼 활용할수있는 web worker라는게 있다

궁금

• fetch/axios는 new Promise 객체를 주는건가?
  : YES, 둘다 promise기반
  : fetch - NW장애, 요청 미완료시 rejected. 4XX도 resolved로 들어옴
  : axios - 기본적으로 응답코드 2XX 아니면 rejected, 설정도 가능

• promise.all에서 하나만 실패해도 전체 꽝?
  : YES, catch 실행 (배열중 첫번째로 실패한 promise 기준으로 작동)

const promise1 = new Promise((res, rej) => res('data 11'));
const promise2 = new Promise((res, rej) => rej('err 22'));
const promise3 = new Promise((res, rej) => rej('err 33'));

console.log('start');
Promise.all([promise1, promise2, promise3])
  .then(console.log)
  .catch(console.log)
console.log('end');

// start
// end
// err 22