TIL) Async function(비동기 함수)와 Promise, Async에서 오류 잡기

 

Async function는 비동기 코드를 아주 깔끔하게 작성하도록 돕는 함수이다. (Promise함수보다 더 깔끔!)

Promise 위에 적용되기 때문에 Promise에 뿌리는 설탕이라고도 한다. 

 

참고 **IE에서는 지원하지 않는다. **

 

---

async & await

async 자체가 함수를 비동기 함수로 선언하는 키워드이다. 

함수 앞에 async를 입력해서 함수를 비동기 함수로 선언하면, 함수는 자동으로 Promise를 반환한다. 

 

➥ 빈 함수를 호출하면 undefined가 출력된다. 

 

➥ 비어있는 async 함수를 호출하면 Promise가 출력된다. 

 

 

➥ 비어있는 async 화살표 함수를 호출하면 Promise가 출력된다. 

 

 

➥ async 화살표 함수를 호출하면 Promise가 리턴된다.  

---

Promise의 원리

 

함수가 값을 반환할 때, resolved 상태로 반환된다. 

 

 

const newFun = async () => {
    return 'LA LA LA LA'
}
newFun().then((data) => {
    console.log('PROMISE RESOLVED WITH:', data)
})

// 출력값
PROMISE RESOLVED WITH: LA LA LA LA
Promise {<fulfilled>: undefined}

➥ 여기서는 비동기 처리가 실행되지 않는다. 

그냥 문자열만 출력되기 때문에 async 함수를 쓸 이유가 없는거다 

---

Promise가 실패로 뜨게 하는 방법은 비동기 함수에 오류를 던지면 된다. 

 

const newFun = async () => {
	throw new Error('UH OH')
    return 'LA LA LA LA'
}

👇 출력값

 

 

** 비동기 함수(async함수)에 오류가 있으면 Promise의 상태는 실패로 뜬다. 

throw 'ERROR'

 

---

Async 키워드를 이용해서 비동기 함수로 선언하는 방법 (비동기 처리 과정은 없다. )

Promise가 값으로 반환되고, 내부에 값이 있느냐에 따라 성공과 실패가 결정되는데 
반환값이 있으면 resolved가 나타나고, 오류가 있으면 오류값과 함께 rejected가 뜬다. 

 

 

1. 인자를 덜 넣었을때

const login = async (username, password) => {
	if(!username || !password) throw 'Missing Credentials'
    if(password === 'corgifeetarecute') return 'WELCOME!'
    throw 'Invalid Password'
}

login('alsltjsals')
	.then(msg => {
		console.log('LOGGED IN!')
    	console.log(msg)
	})
	.catch(err => {
		console.log('ERROR')
   	 console.log(err)
	})

👇 출력값

➥ 인수를 두 개를 넣어야하는데, 'alsltjsals' 하나만 입력해서 누락되었다는 문구가 뜬다. 

 

 

 

2. 조건에 맞지 않을때

 

const login = async (username, password) => {
	if(!username || !password) throw 'Missing Credentials'
    if(password === 'corgifeetarecute') return 'WELCOME!'
    throw 'Invalid Password'
}

login('alsltjsals', 'catiscute')
	.then(msg => {
		console.log('LOGGED IN!')
    	console.log(msg)
	})
	.catch(err => {
		console.log('ERROR')
   	 console.log(err)
	})

👇 출력값

 

➥ 유효하지 않은 비밀번호를 넣어서 'Invalid Password' 가 출력된거다. 

 

 

3. 조건에 맞을때

 

const login = async (username, password) => {
	if(!username || !password) throw 'Missing Credentials'
    if(password === 'corgifeetarecute') return 'WELCOME!'
    throw 'Invalid Password'
}

login('alsltjsals', 'corgifeetarecute')
	.then(msg => {
		console.log('LOGGED IN!')
    	console.log(msg)
	})
	.catch(err => {
		console.log('ERROR')
   	 console.log(err)
	})

👇 출력값

➥ 알맞은 비밀번호를 넣어서 로그인이 되었다.

 

 

---

비동기 함수 처리 과정

Await 키워드는 비동기 코드를 쓰면서 동기적으로 보이게 해준다. 

await 키워드의 역할은 기다리게 하는 것인데,

Promise가 값을 반환할 때까지를 기다리기 위해 비동기 함수의 실행을 일시 정지시킨다. 

 

** 비동기 함수에서만 적용하기 때문에 ASYNC & AWAIT는 한 쌍이다!

 

 

👇 Promise를 생성하고 .then으로 연결하는 방법

const delayedColorChange = (color, delay) => {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {
        	document.body.style.backgroundColor = color;
            resolve();
        }, delay)
    })
}


delayedColorChange('red', 1000)             
	.then(() => delayedColorChange('orange', 1000))
    .then(() => delayedColorChange('yellow', 1000))
    .then(() => delayedColorChange('green', 1000))
    .then(() => delayedColorChange('blue', 1000))

 

👇 위 함수를 비동기 함수를 써보자!

 

const delayedColorChange = (color, delay) => {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {
        	document.body.style.backgroundColor = color;
            resolve();
        }, delay)
    })
}
    
async function rainbow() {
	await delayedColorChange('red', 1000)   // await 키워드를 쓰면 Promise가 결과를 낼 때까지 기다려준다.
    await delayedColorChange('orange', 1000)
    await delayedColorChange('yellow', 1000)
    await delayedColorChange('green', 1000)
    await delayedColorChange('blue', 1000)
    console.log('ALL DONE');
}

👇 'ALL DONE'은 파란색이 나타난 후에 콘솔창에 찍힌다.

 

➥ .then을 쓰거나 콜백을 전달하거나 반환된 값을 연결할 필요도 없다. 

 

 

rainbow().then(() => console.log('end of rainbow!'))

👇 'end of rainbow!' 는 파란색이 나타난 후에 'ALL DONE'가 찍히고 난 뒤에 거의 동시에 콘솔창에 입력된다. 

 

 

---

기다리고 있는 Promise가 reject됐을 때

 

const fakeRequest = (url) => {
	return new Promise((resolve,reject) => {
    	const delay = Math.floor(Math.random() * 4500) + 500;
        setTimeout(() => {
        	if(delay > 4000) {
            	reject('Connection Timeout :(')
            } else {
            	resolve(`Here is your fake data from ${url}`)
            }
        }, delay)
    })
}

async function makeTwoRequests() {
	let data1 = await fakeRequest('/page1');
    console.log(data1);
}

👇 결과값

➥ resolve, reject 결과가 2가지 나온다. 

 

console.log(data1)이 실행되지 않아서 오류가 발생한거라고 생각하면 된다. 

 

 

try {
	dkdidjdu.log('hi')
} catch (e) {
	console.log('its ok', e)
}

➥ try 문에 오류가 될 코드를 적으면, catch문에서는 어떻게 처리할지 정의한다. e는 오류 그 자체를 나타낸다. 

 

➥ 여기서는 참조 오류가 발생했다. 

 

---

const fakeRequest = (url) => {
	return new Promise((resolve,reject) => {
    	const delay = Math.floor(Math.random() * 4500) + 500;
        setTimeout(() => {
        	if(delay > 4000) {
            	reject('Connection Timeout :(')
            } else {
            	resolve(`Here is your fake data from ${url}`)
            }
        }, delay)
    })
}

async function makeTwoRequests() {
	try {
    	let data1 = await fakeRequest('/page1');
        console.log(data1);
        let data2 = await fakeRequest('/page2');
   		console.log(data2);
	} catch (e) {
    	console.log('caught an error!')
        console.log('error is:', e)
    }
}

👇 결과값

➥ Promise가 어떤 값으로 reject되든 간에 reject된 이유나 정보가 나온다.  (위 예시에서는 연결 시간 초과로 가정함)

catch문에 매개변수가 있어야 이유나 정보에 접근 가능하다!!

 

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓