Web/JavaScript
[JavaScript] async/await
choice91
2021. 9. 5. 23:19
728x90
반응형
async 함수
- async와 await는 비동기 코드를 쓰고 Promise를 더 읽기 쉽게 만들어준다.
- async는 function 앞에 위치한다.
아래와 같이 사용한다.
async function 함수() {
// logic
}
화살표 함수를 사용하면 아래와 같이 사용할 수도 있다.
const 변수 = async () => {
// logic
}
function 앞에 async를 붙이면 해당 함수는 항상 Promise를 반환한다.
아래 코드를 실행하면 'Promise { 'Hello' }'를 반환
async function hello() {
return "Hello";
}
console.log(hello());
반환된 값을 사용하기 위해서는 .then()을 사용해야한다.
async function hello() {
return "Hello";
}
hello().then((hello) => console.log(hello));
// 혹은
hello().then(console.log);
// 결과: Hello
await
- await는 async 함수 안에서만 동작한다. (async 함수가 아닌데 await를 사용하면 문법에러 발생)
- '변수 = await 프로미스' 인 경우에는 프로미스가 resolve된 값이 변수에 저장된다.
- '변수 = await 값' 인 경우 그 값이 변수에 저장된다.
async function hello() {
const greeting = new Promise((resolve) => {
resolve("Hello");
});
const result = await greeting;
return result;
}
hello().then(console.log);
// 결과: Hello
예외처리
async, await에서 에러처리는 try...catch를 통해 할 수 있다.
async function func() {
try {
const result = await 프로미스;
return result;
} catch (error) {
console.error(error);
}
}
728x90
반응형