async / await의 개념

1.async / await 란?

앞서 배운 callback함수와 promise가 있었는데요.기존의 비동기 처리방식인 callback함수와 promise의

단점을 보완하고 개발자가 읽기 좋은 코드로 작성할수 있게 도와줍니다.

ex) promise 코드

function p() {
return new Promise((resolve, reject) => {
	resolve('hello');
// or reject(new Error('error');
	});
}

p().then((n) => console.log(n));

ex) async 코드

async function p2(){ // async을 지정해주면 Promise를 리턴하는 함수로 만들어줍니다.
	return 'hello'; 
}

p2().then((n) => console.log(n));

async 를 사용하면 promise 코드를 나타낼 수 있습니다.

함수에 async만 붙이면 자동으로 promise 코드를 인식되고, return 값은 resolve()와 동일합니다.

2. async / await 기본 문법

async function 함수명() {
  await 비동기_처리_메서드_명();
}

• 항상 function() 앞에 async 를 작성할 것.
• 내부 로직 중 비동기 처리 메서드 명 앞에 await를 작성할 것.
• await의 대상이 되는 비동기 처리 코드는 Axios등 프로미스를 반환하는 API 호출 함수

이를 응용하여 코드 예시를 보자면,

async function sendTokenToSMS(myphone, result){
    const SMS_KEY = process.env.SMS_KEY;
    const SMS_SECRET = process.env.SMS_SECRET;
    const SMS_SENDER = process.env.SMS_SENDER;
    
    
    const messageService = new mysms(SMS_KEY, SMS_SECRET)
    const res = await messageService.sendOne({
        to: myphone,
        from: SMS_SENDER,
        text:`[코드캠프] 안녕하세요?! 요청하신 인증번호는 ${result}입니다!`
    })

sendTokenToSMS()함수는 promise 객체를 반환하는 함수입니다.여기에 async / await 함수를 사용하지 않았다면 res 함수에 messageService 를 받기 전에 이미 빈 페이지가 전송이 되었을 것입니다.비동기에 대한 사고를 방지한 거라고 볼수 있습니다.

3. async / await 예외 처리 방법

promise 객체에서 에러 처리를 위해 catch() 를 사용한거 처럼 async에서는 try catch 방법이 있습니다.

then(),catch()를 이용하여 처리하는 방법도 있습니다.

ex) then(),catch() 예외 처리 방법

let myPromise = new Promise((resolve, reject) => {  
  setTimeout(function(){
    resolve("Success!");
  }, 250);
});

//.then .catch 
myFirstPromise
  .then((successMessage) => {
    console.log("true! " + successMessage)})
  .catch((errorMessage) => {
    console.log("false! " + errorMessage)})
  })

promise에서 resolve (성공)이 실행될 시, then 이 실행되고,

reject(실패)이 실행될 시에는 catch문이 실행됩니다.

ex) try catch 예외 처리 방법

• try catch는 스크립트가 죽는 걸 방지하고, 에러핸들링을 하여 더 합당하게 나타낼수 있습니다.

try{
   ...//(코드)
}catch(err){
	...//(에러 핸들링)
}

• try catch 의 알고리즘 동작 순서

1. 에러가 없다면 Try안의 코드가 실행되고,catch 문은 생략하게 된다.
2. 에러가 있다면 try 안의 코드는 중단되고, catch 문으로 알고리즘이 이동하게 된다.

결론

우리 환경에 있어서 비동기 처리방식이 거의 모든 부분을 차지 하고있지만 그만큼 더 편리하고 에러가 없게 하기 위해 편리한 코드들이 많은거 같다.아직까지 공부할 부분이 많다. 더 많이 보고 연습해 보는 시간을 가져야겠다.

참고
https://velog.io/@khyup0629/javascript-async%EC%99%80-await%EC%9D%98-%EA%B0%9C%EB%85%90%EA%B3%BC-%EC%82%AC%EC%9A%A9%EB%B2%95

https://sewonzzang.tistory.com/25