Udemy - JavaScript: The Advanced Concepts
move(100, 'left', function(){
move(200, 'right', function() {
move(300, 'up', function() {
...콜백지옥...
});
});
});
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
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);
method
.then()
.then() //앞의 then 작업 끝나고 시작
.catch() //이전에 발생하는 reject만 모두 잡음, 오류없음 통과
.then() //catch가 불렸다면 catch()의 return 받아서 실행
.finally() //성공실패 상관없이 마지막 한번 호출, 들어오는 파라메터 없음
...
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 function foo(){
const value = await promise1(); //pause
await promise2(value); //pause
}
Promise는 늦게 등장한 JS의 native객체임
JS runtime에서 제공하는 web API와는 다른것으로, 별도의 Q가 필요해짐
그래서 Job Queue가 추가되었고, callback Queue보다 처리 우선순위가 높음
call stack 종료 -> Job Q 처리 -> callback Q 처리
forEach : 병렬실행, 전체완료 기다리지않음
Promise.all : 병렬실행, 전체완료 기다림
for await of : 순차실행, 전체완료 기다림
쓰레드처럼 활용할수있는 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