[Frontend Study] Day 13 - Async, Await

Async, Await는 비동기 처리 방식 중 한가지의 방법이다. 

Promise를 조금 더 편리하게 사용할 수 있도록 도와주는 편리한 친구다.

 

---

사용법

async function functionName() {
	let promise = new Promise((resolve, reject) => {
    	setTimeout(() => resolve("success"), 1000)
    });
    
    let result = await promise;
    
    aler(result);
}

functionName();

 

이렇게 코드를 작성하면 functionName를 실행했을 때, await promise 부분에서 promise가 실행이 될 때까지 기다리게 된다.

이 기능을 사용하여 서버를 통해서 api 연결을 할 때, 값이 없는 불상사가 생기는 것을 막을 수 있다.

async function login(String memberPhone, String memberPassword) {

  let result = await post('/login', {'memberPhone': memberPhone, 'memberPassword': memberPassword});

  return result;
}

login("010-0000-0000", "1234");

 

이렇게 사용하면 result 값이 도착할때까지 기다리게된다.

 

사용할 때의 주의점

await 함수는  최상위 레벨 코드에서 작동하지 않는다.

let result = await post('/login', {'memberPhone': memberPhone, 'memberPassword': memberPassword});
 return result;

 

async로 감싸진 함수 내에서만 실행이 가능하다.

익명 async 함수 내에 있어도 사용이 가능하다.

(async () => {
  let result = await post('/login', {'memberPhone': memberPhone, 'memberPassword': memberPassword});

  return result;
})();

 

에러 핸들링

async function functionName() {
  throw new Error("에러 발생!");
}

 

프라미스가 거부당했을 때 에러 상황을 알려주기 위해서 사용할 수 있다.

 

try.. catch 문을 사용한 에러처리

async function login(String memberPhone, String memberPassword) {

  try {
    let result = await post('/login', {'memberPhone': memberPhone, 'memberPassword': memberPassword});
  } catch(err) {
    alert(err);
  }
}

login("010-0000-0000", "1234");

 

try.. catch 문을 이용한 에러처리이다.

try 문에서 오류가 발생하면 그걸 인지해서 catch 문을 실행해준다.