비동기 코드에 대한 간단한 그림 설명
기본적으로 자바스크립트 엔진(V8
, Spider Monkey
등)은 싱글 스레드임
👉 Only one action at a time
하지만 브라우저
or nodejs
환경에서 event loop
, callback queue
등을 이용해 보조해 단순한 싱글 스레드 원리와는 다르게 동작함
참고 : 자바스크립트 동작 원리 및 구조
특정 실행에 대한 정보를 기억하고 시점에 맞게 실행시켜줌
operation chain
fetch('https://foo.com/resource/1', {})
.then(response => response.json())
.then(jsonData => console.log(jsonData));
Promise
: 특정 값이나 에러를 반환하는 함수 정보를 포함하는 자바스크립트 객체 (굳이 비동기 함수x)const myPromise = new Promise(function(resolve, reject) {
setTimeout(function () {
resolve('it worked');
},2000)
});
myPromise
.then(successString => {
console.log(successString); // it worked
return '123'; // 일반적인 데이터 return 가능
})
.then(data => {
console.log(data); // 123
return myPromise; // promise를 리턴하면 기존 promise를 대체함
})
.then(data => {
console.log(data); // it worked
});
then
에 할당하는 함수가 relove
에 할당됨then
은 항상 새로운 unsettled
상태의 Promise
를 반환함resloved
된 상태이므로 기존 resolved
된 응답값을 사용함promise
는 오직 한번만 resolved
됨Pending
: 아직 응답을 받지 못한 promise 내의 초기 상태, 코드
Setteled
Fulfilled
: resolved된 promise (성공적으로 수행된 상태)Rejected
: rejected된 promise아래처럼 custom 화 시킬 수 있음
const setTimer = (duration) => {
return new Promise(function(resolve, reject) {
setTimeout(function () {
resolve('it worked);
},duration)
});
};
setTimer(2000)
.then(successString => {
console.log(successString); // it worked
return '123'; // 일반적인 데이터 return 가능
})
.then(data => {
console.log(data); // 123
return setTimer(3000); // promise를 리턴하면 기존 promise를 대체함
})
.then(data => {
console.log(data); // it worked
});
rejected
state를 가지는 promise
fetch('https://foo.com/resource/1', {})
.then(
response => response.json(),
error => return 'Error handled'
)
.then(
response => console.log(response),
error => console.log(error)
);
fallback
함수 코드를 then
의 두번째 인자로 넣어줌
promise
의 에러 발생시에 가장 처음에 구현된 error fallback
코드가 실행되고, 그 fallback
코드 이전의 then
체이닝들은 무시됨.
그 이후의 체이닝들은 이전의 체이닝이 resolved
되었다고 판단하고, 제공하는 응답값을 사용해 resolve
시도하게 됨.
then
에서는 error
로 가지 않음then
에서는 error
로 가지 않고, resolve
에 할당한 함수에서undefined
찍음 catch
메소드 사용한 방법
fetch('https://foo.com/resource/1', {})
.then(
response => response.json()
)
.catch(
error => console.log(error) // error 발생시 실행됨
)
.then(
response => console.log(data); // undefined
);
catch
도 위에서 설명한 규칙대로 선언한 순서에 따라 동작하게 됨synthetic sugar
임async
prefix 붙은 함수는 항상 promise
를 반환함 (return 명시가 없더라도)await
prefix는 async
함수 내에만 사용 가능함// async function foo() {...}
const sendRequest = async () => {
try{
const response = await fetch('https://foo.com/resource/1', {});
console.log('got reponse!');
console.log(reponse);
const data = reponse.json();
console.log(data);
} catch (err) {
console.log('got error');
}
};
promise
를 원소로 가지는 배열을 인자로 받음promise
를 같이 execute
시키고 모든 promise
로 된 응답을 배열로 만들어 반환함promise
중 하나가 거부하는 경우, 첫 번째로 거절한 promise
의 이유를 사용해 모두 거부됨Promise.all([getPosition(), setTimer(1000)]) // [promise1, promise2]
.then(promiseData=>console.log(promiseData));
all
사용성에서 각각의 이행하거나 거부했을 때에 대한 대응을 할 수 있는 Promise
객체를 얻고 싶을때 사용함Promise.allSettled([getPosition(), setTimer(1000)]) // [fullfilledPromise1, rejectedPromise2]
then((results) => results.forEach((result) => console.log(result)));
promise
를 원소로 가지는 배열을 인자로 받음promise
를 같이 execute
시킨 후 가장 먼저 받은 응답을 사용함 (이행된 promise
or 거절된 promise
둘 다 해당 됨)Promise.race([getPosition(), setTimer(1000)]) // promise1
.then(data=>console.log(data));
throw, reject 비교
간단 요약 설명