안녕하세요
이번 글에서는 자바스크립트에서의 async/await - (동기, 비동기) 핵심만 알려드리겠습니다.
1. 사용이유
Promise 대신 코드를 동기적으로 짜고 싶을 때 사용하시면 됩니다.
2. async
async키워드를 함수앞에 붙이면, 함수 자체가 Promise가 됩니다.
함수가 promise로 바꼇기에, 함수에 then을 붙일 수 있습니다.
그리고 귀찮게 Promise 생성할 때 마다 new Promise를 해 줄 필요도 없어집니다.
async function say_hi () {
console.log('hi');
}
say_hi().then(function() {
console.log('성공');
})
return을 통해 값을 then안으로 넣어줄 수 있습니다.
async function say_hi () {
return 'hi';
}
say_hi().then(function(result) {
console.log(result); //hi
})
3. await
await은 async함수 안에서 사용할 수 있습니다.
await은 then() 과 기능은 비슷하지만 코드가 훨씬 간단합니다.
then은 Promise를 기다린 다음에 완료되면 코드를 실행하는 건 기억하고 계시죠?
먼저 then을 이용해서, Promise를 처리해 보겠습니다.
async function calculation_async() {
const calculate_num = new Promise((resolve, reject) => {
const result = 1 + 1; //비동기 함수인걸로 가정
resolve(result);
});
calculate.then((result) => {
console.log(result); //2
});
}
calculation_async();
then을 쓰니 코드가 너무 긴 느낌입니다.
이번엔 awiat을 사용해서 코드를 보여드리겠습니다.
async function calculation_async() {
const calculate_num = new Promise((resolve, reject) => {
const result = 1 + 1; //비동기 함수인걸로 가정
resolve(result);
});
const result = await calculate_num; //2
}
calculation_async();
훨씬 간단해 보이네요!
4. await의 에러처리
await이 실패하게 되면 코드가 멈추게 됩니다.
그래서 실패했을때 예외처리를 해줘야 하는데요.
try-catch를 이용해서 하면 됩니다.
async function get_data() {
try{
const user = await fetch_user();
const name = await fetch_name();
} catch(error){
console.log(error);
}
}
이렇게 하면 try안에서 하나라도 에러가 나올 시 error객체에 담기기 때문에,
에러에 유형에 맞게 코드를 처리할 수 있습니다.
'javascript > (es6)핵심만 시리즈' 카테고리의 다른 글
[JS ES6]-[22] Symbol 핵심만 이해하기 (0) | 2023.09.09 |
---|---|
[JS ES6]-[21] enumerable, iterable(for in/ for of) 이해하기 (0) | 2023.09.09 |
[JS ES6]-[19] 동기, 비동기 핵심만 이해하기(3) - promise(프로미스) (0) | 2023.09.09 |
[JS ES6]-[18]동기, 비동기 핵심만 이해하기(2) - 콜백함수 (0) | 2023.09.09 |
[JS ES6]-[17] 동기, 비동기 핵심만 이해하기(1) - 이벤트루프 (0) | 2023.09.09 |