1. 동기와 비동기
동기
- 작업(task)들이 순차적으로 이루어 지는 것.
ex) A 종료 -> B 시작 - 다른 작업들을 blocking한다.
비동기
- 작업(task)들이 순차적으로 이루어지지 않는다.
ex) A -> B 순서의 작업이 있다면 A를 종료하기 전에 B를 실행할 수 있다. - 다른 작업들을 non-blocking한다.
- javascript를 사용한 비동기 통신 방식을
Ajax(Asynchronous Javascript and XML)라고 한다. HTTP 요청(GET, POST ...),이벤트 핸들러(click, over ...),setTimeout,setInterval이 있다.
2. 비동기 통신 방식 살펴보기
Callback
- 콜백 함수란 인자로 들어오는 함수를 칭함.
- 콜백은 비동기 통신을 할 수 있는 한 패턴이다.
- 문제점: 콜백 헬로 인한
에러처리 불가,가독성 hell
Promise
- ES6에서 나온 비동기 패턴.
- 비동기 통신 결과와 상태를 저장하는 객체.
- 후속처리 메서드로
then(성공),catch(에러),finally(무조건)가 있다.
async/await
- Promise의 복잡성으로 인해 ES8에서 나온 비동기 패턴.
- Promise를 기반으로 하며, 완전히 같지는 않으나 사용하기 편하다.
3. Promise 자세히 보기
비동기 통신의 핵심은 promise를 이해하는 것이다.
promise는 비동기 통신의 상태와 처리 결과를 관리하는 객체이다.
pending 상태인 promise의 비동기 통신이 성공하면 resolve 함수가 호출되고, fulfilled 상태가 된다.
promise의 비동기 통신이 실패하면 reject 함수가 호출되고, rejected 상태가 된다.
구성 요소
(1) 상태
| 상태(state) | 설명 |
|---|---|
| Pending | 대기중일 때 |
| Fulfilled | 비동기 처리가 성공했을 때 |
| Rejected | 비동기 처리가 실패했을 때 |
(2) 결과
| 비동기 처리 결과 | 설명 |
|---|---|
| value | 성공시 |
| error | 실패시 |
(3) 후속처리 메서드
| 메서드 | 설명 |
|---|---|
| then | 성공시 호출 |
| catch | 에러시 호출 |
| finally | 성공, 에러 여부 상관없이 호출 |
사용법
이 promise를 더 간단히 이해하기 위해서는, Provider / Consumer 관점에서 봐야한다.
- Provider : api를 만들 때 Promise를 이용한다.
- Consumer : 특정 행동을 하기 위해 이 api를 이용할 수 있다.
(1) 선언
content를 수정하기 위해 patchContent api를 만든다.
// PATCH /todo/:id
const patchContent = (obj: ContentObj): Promise<UpdateContentResponse> => {
return new Promise((resolve, reject) => {
if (obj.url && obj.content)
return resolve({
status: 200,
msg: "포스트가 수정되었습니다.",
content: obj.content,
id: obj.id,
});
else return reject(new Error("url, content가 있는지 확인해주세요."));
});
};(2) 사용
이 api를 사용할 때는, 후속처리 메서드 then을 이용하여 데이터를 저장하고, catch를 이용해서 에러를 처리한다.
patchContent(obj)
.then(response => setResult(response))
.catch(err => setError(err));
// 실제 promise의 결과는 보통 data안에 들어온다. (response.data)
hello