Javascript

Async-Await

🔧 비동기를 다루는 또 다른 방법

🔧 함수 이름 앞에 async를 붙이거나, 화살표 함수 앞에 async를 붙이는 방식으로 사용한다.

async function 함수이름() {  }
const 함수이름 = async() => { }

🔧 Async-Await 함수는 Promise를 기반으로 하고있다.

• 따라서 Promise를 먼저 공부하고 오면 좋다.

---

Promise 객체 호출하는 방법

function p(ms){
    return new promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve(ms);
      },ms);  
    });
}

//1. Promise 객체를 이용해서 비동기 로직을 수행할 때

p(1000).then((ms) => {
    console.log(`${ms}ms 후에 실행된다.`);
});

//2. Promise 객체를 리턴하는 함수를 await로 호출하는 방법

const ms = await p(1000);
console.log(`${ms}ms 후에 실행된다.`);

// 🚨 error : SyntaxError: await is only valid in async function
// await을 사용하려면 항상 async 함수 안에서 사용되어야 한다.

⭐️ 함수 앞에는 async, 프로미스 앞에는 await을 붙여준다.

---

await과 async

• async가 있는 함수를 실행하면 그 안에 있는 로직이 끝날 때까지 프로그램이 끝나지 않는다.
• await 함수를 만나면 비동기 처리가 끝날 때까지 기다렸다가 resolve된 인자를 가져와서 계속 진행하게 된다.

✨ await, async 장점 : 로직의 코드가 밑으로 내려갈 수 있게 표현할 수 있어서 알아보기 편하다.

function p(ms){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve(ms);
      },ms);  
    });
}

//Promise 객체를 리턴하는 함수를 await로 호출하는 방법
(async function main(){
    const ms = await p(1000);
    console.log(`${ms}ms 후에 실행된다.`);
})();

---

reject 된 경우 try, catch 이용하기

• try문으로 함수 p를 호출하고, 만약 reject 되면 catch문으로 넘어간다.

function p(ms){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        reject(new Error('reason'));
      },ms);  
    });
}

(async function main(){
    try{
    const ms = await p(1000);
    } catch(error){
        console.log(error);
    }
})();

---

async function에서 return 되는 값

• async function에서 return 되는 값은 Promise.resolve 함수로 감싸져서 리턴된다.

async function asyncP(){
    return 'doyeon';
}

(async function main(){
    try{
    const name = await asyncP();
    console.log(name);
    } catch(error){
        console.log(error);
    }
})();

---

function p(ms){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
          resolve(ms);
        // reject(new Error('reason'));
      },ms);  
    });
}

async function asyncP(){
  	// 만약 p에서 reject가 되면, asyncP에서 try,catch문으로 에러처리를 해주면 된다.
    const ms = await p(1000);
    return 'doyeon:' + ms;
  	// 1초 후에 doyeon 1000 이 출력된다.
}

(async function main(){
    try{
    const name = await asyncP();
    console.log(name);
    } catch(error){
        console.log(error);
    } finally {
        console.log('resolve 되거나 reject 된 후에 end');
    }
})();

---

연속적인 비동기 처리를 할 때 차이점

• Promise : 계속 chaining을 해준다. ⛓
• Async : 한줄씩 끝내면서 처리한다. 🔚⏳
  • 사람마다 다르겠지만 개인적으로 async가 코드의 흐름을 더 직관적으로 파악할 수 있는 것 같아서 좋은 것 같다.

function p(ms){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve(ms);
        //reject(new Error('reason'));
      },ms);  
    });
}

// Promise : 계속 만들어서 return, chaining
p(1000)
.then(()=> p(1000)
.then(()=> p(1000))
.then(()=>{
    console.log('3000ms 후에 발생');
}));

// Async : 한줄한줄이 끝나야 비동기가 진행됨
(async function main(){
    await p(1000);
    await p(1000);
    await p(1000);
    console.log('3000ms 후에 발생');
})();

---

Promise.all, Promise.race 를 await, async로 처리하기

function p(ms){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve(ms);
        //reject(new Error('reason'));
      },ms);  
    });
}

(async function main() {
    const results = await Promise.all([p(1000),p(2000),p(3000)]);
    // 출력: 3초후에 [1000,2000,3000]
    console.log(results);
})();

(async function main() {
    const result = await Promise.race([p(1000),p(2000),p(3000)]);
    // 출력: 1초후에 1000
    console.log(result);
})();