Promise 함수를 사용하는게 불편하다면 그보다 쉽게 쓸 수 있는 ES8문법이 있다.
async, await 라는 키워드 인데 각각 Promise와 then을 쉽게 만들어 주는 문법이다.
async
함수 앞에 async 를 앞에 붙이면 함수 실행 후 Promise 오브젝트를 리턴한다.
그래서
async function test() {
return 1 + 1;
}
test().then(function (result) {
console.log(result)
console.log("성공");
});
이렇게도 가능하다.
왜냐하면 async를 붙이는 순간 함수가 Promise 함수가 되어버리기 때문..
await
anync 키워드를 쓴 함수 안에서는 await 를 사용할 수 있다.
await 는 .then() 을 대체 할 수 있으면서도 then() 보다 문법이 간단하다.
그래서
async function test2() {
const 어려운연산 = new Promise((resolve, reject) => {
const result = 1 + 1;
resolve(result);
});
const result = await 어려운연산;
console.log(result);
}
이렇게 사용 가능하다.
그런데 만약 어려운 연산이라는 Promise 가 실패할 경우
await 변수 의 코드는 에러가 나고 코드 실행이 멈출 것이다.
여기서 코드 실행을 멈추고 싶지 않다면 try catch 라는 문법을 사용할 수 있다.
try catch
try catch 는 자바스크립트 문법인데,
try{} 안의 코드가 에러가 나고 멈출 경우
대신 catch{} 내부의 코드를 실행한다.
async function test3() {
const 어려운연산 = new Promise((resolve, reject) => {
const result = 1 + 1;
result > 3 ? resolve() : reject();
});
try {
const result = await 어려운연산;
console.log(result);
} catch {
console.log("실패");
}
}
위와 같이 catch{} 를 사용하여 에러처리가 가능하다.
'개발 일지 > JavaScript' 카테고리의 다른 글
Parameter 와 Argument (0) | 2023.03.28 |
---|---|
호이스팅 과 TDZ (0) | 2023.03.28 |
REST API가 뭔가요 (0) | 2023.03.27 |
웹페이지가 브라우저에 렌더링 되는 과정 (0) | 2023.03.27 |
JavaScript Promise (0) | 2022.12.20 |