안녕하세요 이틀 만에 올립니다.
async와 await 은 자바스크립트의 비동기 처리 중에 가장 최근에 나온 문법입니다.
async, await 문법은 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 사용하기 쉽도록 문법이 간단하게 되어있습니다.
async 문법을 적용하려면 다음과 같 이 async를 함수 앞에 붙여줍니다.
// async - await 기본 문법
async function 함수명() {
await 비동기_처리_메서드_명();
}
위의 예제처럼 function 앞에 async를 붙이면 해당 함수는 무조건 이행 상태의 프로미스 객체를 반환합니다.
다음은 간단한 문자열을 반환하는 async 함수의 정의와 호출에 대한 예제입니다.
async function getName(){
return 'god';
}
getName().
then((name) =>{
console.log(name);
});해당 예제를 복사해서 자신이 사용하고 있는 IDE에서 실행시켜보면 정상적으로 god이 출력됨을 알 수 있습니다. 그렇다는 말은 await으로 값을 묶어주지 않아도 이행된 프로미스 객체를 반환한다는 사실을 알 수 있습니다. 왜냐하면 then 함수는 이전 글에서 조금 설명했듯이 프로미스가 가지고 있는 함수이기 때문입니다.
그리고 다음으로 살펴볼 await 이라는 녀석은 async와 함께 사용합니다.
await 키워드는 async 가 없다면 살 수가 없습니다. 다음 예제처럼 await 키워드를 async 함수가 아닌 일반적인 함수에서 사용하면 오류가 발생합니다.
※ 실제 실행시키고 오류를 띄워보세요.
async function getName() {
return 'god';
}
function printName() {
// SyntaxError: await is only valid in async function
const name = await getName();
console.log(name);
}위의 예제에서 이름을 출력하는 함수가 정상적으로 실행될려면 어떻게 수정을 할까요? 다음과 같이 하면 됩니다.
async function getName() {
return 'god';
}
async function printName() {
// 성공
const name = await getName();
console.log(name);
}
printName(); // god지금까지 간단한 예제들로 기본적인 async, await 문법에 대해서 알아봤습니다.
이번에는 예외처리에 대해서 알아보겠습니다.
결론적으로 예외처리를 하기 위해서는 try - catch 문을 사용하면 됩니다.
<HTML>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="async.js"></script>
<title>Promise</title>
</head>
<body>
</body>
</html>
<Javascript>
const setTimeoutWithAnimationFrame = (callback, time) => {
let start = new Date().getTime();
const fn = () => {
let ts = new Date().getTime();
if (ts - time > start) {
callback();
} else {
requestAnimationFrame(fn);
}
};
requestAnimationFrame(fn);
};
const getUser = () => {
return new Promise((resolve, reject) => {
const user = {
id: 1,
name: 'jade',
age: 10,
};
setTimeoutWithAnimationFrame(() => {
if (Math.random() <= 0.5) {
resolve(user);
} else {
reject(new Error('사용자의 데이터를 가져오는데 실패 했습니다.'));
}
}, 1000);
});
};
(async function () {
try {
const user = await getUser();
console.log(user);
} catch (err) {
console.error(err);
}
})();
위의 예제는 try - catch 문에 대해서 설명하기 위해서 가져온 예제입니다. 그리고 프로미스 객체를 반환하는 getUser함수를 호출하기 위해서 async 함수로 감싸줬습니다. async는 최상위의 레벨 코드에서는 동작하지 않기 때문에 즉, 지원하지 않기 때문에 async 함수를 호출할 수 있는 익명 함수로 감싸줌으로써 해결할 수 있습니다.
어쨌든 성공적으로 getUser 함수의 실행이 완료되면 결과창에 출력 될 것이고, 오류가 나게 되면 제어 흐름이 catch 문으로 가기 때문에 빨간색으로 된 다음과 같은 메시지를 볼 수 있습니다.
오늘은 간단하게 자바스크립트의 비동기 처리 작업을 이전보다 간단하게 할 수 있도록 도와주는 async, await에 대해서 알아보았습니다.
내일은 자바스크립트의 클로저에 대해서 공부한 뒤에 정리해서 올려보겠습니다.
'취업 > 기록' 카테고리의 다른 글
| 그럭저럭 (0) | 2022.08.19 |
|---|---|
| 취업 프로젝트 (0) | 2022.08.18 |
| D - Day 93 - 1 (함수에 대한 기본) (0) | 2021.06.15 |
| D - Day 95 (Javascript Promise) (0) | 2021.06.13 |
| D - Day 97 (자바스크립트 Callback Function) (0) | 2021.06.11 |