비동기 처리
- 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 javascript의 특성
- 비동기 처리를 사용하는 이유
- 서버로 데이터를 요청 시, 서버가 요청에 대한 응답을 주는 지 알 수 없는 상태에서 무한정 기다릴 수 없음
- 코드 실행 - 기다림 - 코드 실행 - 기다림 ... 이런 과정이 반복된다면 웹을 실행하는 데에 매우 오랜 시간이 걸림
- api 호출, POST 전송 등은 대부분 비동기 처리
콜백 (callback) 함수
- javascript는 함수를 매개변수로 받고 다른 함수를 통해 반환될 수 있는데, 매개변수로 대입되는 함수를 콜백 함수라고 부름
- 다른 함수가 실행을 끝낸 뒤 실행되는 함수
- 콜백 함수를 사용하는 이유
- 비동기 방식으로 작성된 함수를 동기 처리하기 위함
- 응답을 받은 이후에 처리되어야 하는 종속적인 작업도 있을 수 있으므로 그에 대한 대응 방법이 필요
- 함수를 선언한 뒤, 맨 마지막에 함수 타입 파라미터를 하나 더 선언해주는 방식으로 정의
button.addEventLister("click", sayHello);
콜백 지옥 (callback hell)
- 비동기 프로그래밍 시 발생하는 문제
- 함수의 매개변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기가 너무 깊어지는 현상
- 가독성 ↓ 코드 수정 난이도 ↑
Promise
- 비동기 함수를 동기 처리하기 위해 만들어진 객체
- 성공과 실패를 분리하여 반환
- 비동기 작업이 완료된 이후에 다음 작업을 연결시켜 진행할 수 있는 기능을 가짐
Promise의 상태
- Pending (대기) : Promise를 수행 중인 상태
- Fulfilled (이행) : Promise가 resolve된 상태 (성공)
- Rejected (거부) : Promise가 지켜지지 못한 상태, reject된 상태 (실패)
- Settled : fulfilled 혹은 rejected로 결론이 난 상태
Promise 사용법
function promise1(flag) {
return new Promise(function (resolve, reject) {
if (flag) {
resolve ("promise 상태는 fulfilled! then으로 연결됩니다.
이 때의 flag는 true입니다.");
} else {
reject("promise 상태는 rejected! catch로 연결됩니다.
이 때의 flag는 false입니다.");
}
});
}
- Promise는 두 가지 콜백 함수를 가짐
- resolve(value) : 작업을 성공(fulfilled)한 경우, 그 결과를 value와 함께 호출
- reject(error) : 에러(rejected) 발생 시, 에러 객체를 나타내는 error와 함께 호출
promise1(flag)
.then(function (result) {
console.log(result);
})
.catch(function (err) {
console.log(err);
});
- resolve() : then 메서드 실행
- reject() : catch 메서드 실행
Promise 체이닝
- then 메서드 연속 사용 → 순차적인 작업 가능
- 콜백 지옥에서 탈출
- 마지막 catch 구문에서 한 번에 에러 처리 가능
- 예외 처리 간편
async / await
- Promise 기반 코드를 더 쉽게 쓰고 읽기 위해 등장
- 비동기 처리 패턴 중 가장 최근에 나온 문법
async
- 함수 앞에 붙여 Promise를 반환
- Promise가 아닌 값을 반환해도 Promise로 감싸서 반환함
await
- Promise 앞에 붙여 Promise가 다 처리될 때까지 기다리는 역할을 하며, 결과는 그 후에 반환
async function exec() {
goMart();
await pickDrink();
pay();
}
