KDT 포스코X코딩온 웹 과정 14기 18일 - callback, promise, async

[ 목차 ]

 

1. setTimeout(함수, 지연시간)

- 설정된 지연시간이 지난 후에 함수를 실행시킴

 

2. 비동기 처리란?

1. 특정 코드와 연산이 끝날 떄까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 특성
2. 서버로 데이터 요청시 서버가 언제 그 요청에 대한 응답을 줄지 모르는 상황에서 마냥 기다릴 수는 없음.
3. 만약 동기처리를 하게 된다면 웹 하나를 실행하는데 엄청 오랜 시간이 걸리게 됨.

 

3. 콜백(callback) 함수

1. Javascript는 함수를 인자로 받고 다른 함수를 통해 반환될 수 있는데, 인자(매개변수)로 대입되는 함수
2. 즉, 다른 함수가 실행을 끝낸 뒤 실행되는 함수로 비동기 방식으로 작성된 함수를 동기 처리하기 위해 사용
3. 함수를 선언할 때는 parameter(인자, 매개변수)로 함수를 받아서 쓸 수 있다
4. 독립적으로 수행되는 작업도 있는 반면 응답을 받은 이후 처리되어야 하는 종속적인 작업 도 있을 수 있으므로 그에 대한 대응 방법이 필요

 

 

4. 콜백 함수의 사용방법

보통함수를 선언한 뒤에함수 타입 파라미터를 맨 마지막에 하나 더 선언 해 주는 방식으로 정의
하지만 함수의 매개변수로 또 함수를 받아 넘기기에 코드의 들여쓰기가 너무 깊어지게 됨.

 

5. Promise 방식

비동기 함수를 좀더 알아보기 쉬운 방식으로 동기 처리하기 위해 만들어짐.
성공과 실패를 분리하여 반환함.
비동기 작업이 완료된 이후, 다음 작업을 연결시켜 진행할 수 있는 기능

 

5. Promise 방식의 4가지 상태

• Pending(대기) : Promise를 수행 중인 상태
• Fulfilled(이행) : Promise가 Resolve 된 상태 (성공)
• Rejected(거부) : Promise가 지켜지지 못한 상태. Reject 된 상태 (실패)
• Settled : fulfilled 혹은 rejected로 결론이 난 상태

 

6. Promise 사용법

Promise는 두 가지 콜백 함수를 가짐
• resolve(value) : 작업이 성공(fulfilled)한 경우, 그 결과를 value와 함께 호출(.then 문의 함수 실행)
• reject(error): 에러(rejected) 발생 시 에러 객체를 나타내는 error와 함께 호출(.catch문의 함수 실행)

7. Promise 체이닝

콜백함수를 사용한 방식

 

promise 객체를 사용한 방식

함수 자체는 동일한 의미를 내포하지만, 콜백함수보다 promise 객체가 훨씬 코드가 깨끗함.
작업이 순차적으로 진행되고 있음을 보여줌.
마지막에 한번만 예외 처리문인 . catch를 사용하면 되기에 간편함.

 

8. Async / Await

Promise 도 chaining을 하다보면 then().then()… 처럼 꼬리를 물게 되어 코드의 가독성이 헤침
Promise보다 코드의 직관성을 헤치지 않으면서, 동기처리를 하기 위한 방법으로 만들어진 규칙
async가 붙여진 함수는 promise 객체를 반환하기에 크게 다른 건 아님.

 

9. Async / Await의 사용방법

await가 표시된 구문의 처리가 완료될때까지 아래의 pay 함수는 실행되지 않음