[JavaScript] Promise와 async/await

  지난 포스트에서는 콜백함수와 비동기처리에 대해 간단하게 알아봤습니다. 마지막에는 콜백함수 사용 시 발생하는 가독성 문제; 콜백 지옥에 대해서도 알아보았습니다. 이번에는 이를 해결하기 위한 Promise와 async/await 문법에 대해 정리해보겠습니다.

---

Promise

  Promise는 비동기 처리를 좀 더 쉽게 하기 위한 객체입니다. 이 Promise 객체를 생성할 때, resolve, reject를 인자로 받아 resolve / reject 해주는 함수를 실행해주겠다고 '약속'해주게 됩니다.

const foo = (resolve, reject) => {
	setTimeout(()=>{
    	resolve("Success");
    }, 1000);
};

conse getPromise = () => new Promise(foo); //프로미스 객체 생성

getPromise().then((res)=>console.log(res));

 

  위에서 Promise 객체가 생성되면서, resolve(성공) 시 success를 넘겨주겠다고 약속합니다. 1초 뒤의 비동기 처리가 성공했다면요.

 

  사실 Promise 객체를 생성할 일은 거의 없습니다. 저는 아직 생성해본 적 없네요. Promise는 보통 서버로 axios등으로 보내고 return 받는 용으로 씁니다. 이때 성공한 것(resolve)는 .then()으로 확인할 수 있고, 실패한 경우는 .catch()로 확인할 수 있습니다. 

 

request.post('/auth/login')
		.then((res)=>{console.log(res.data.access_token)}
        .catch((err)=>(console.log(err))}

  이렇게 Promise를 사용하면 콜백지옥을 피할 수 있고, 에러 처리도 좀 더 쉬워집니다.

 

---

async / await

 

  이마저도 쓰기 어렵다고 느꼈던 개발자들은 좀 더 쉬운 문법을 생각하기 시작했습니다. 비동기 처리를 '동기처리인 것 처럼' 쓸 수 있는 문법을 고안해냈습니다. 이것이 바로 async / await 문법입니다. 사실 Promise 정도만 써도 성능상 문제는 없지만 코드 가독성이 매우매우 향상되기 때문에 async / await 쓰는 것을 추천드립니다. 

 

  함수를 선언할 때 async 를 사용하고, 각 Promise 앞에 await을 씁니다. 그러면 await에서 Promise가 끝날 때까지 기다렸다가 다음 작업을 수행할 수 있습니다. 

 

const getCommentAPI = async (postID: number) => {
	try {
    	const response = await authRequest.get(....);
        return response.data;
       }
    catch (e) {
    console.log(e);
    }
 }};

이런식으로 .then((res)=>{})보다 res = await ~~~ 으로 쓰는게 좀 더 간결합니다.

 

예외처리는 try / catch 문으로 합니다.