티스토리 뷰
콜백
콜백 함수 나중에 호출할 함수 의미
js호스트 환경이 제공하는 여러 함수를 사용하면 비동기 동작 스케줄링 가능
원하는 때에 동작이 시작 할 수 있도록
setTimeout은 스케줄링에 사용되는 가장 대표함수
프라미스
문법
let promise = new Promise(function(resolve, reject) {
});new Promise에 전달되는 함수 실행자,실행함수(executor)라고 부름
new Promise가 만들어질때 자동으로 실행되는데 결과를 최종적으로 만들어내는 제작코드 포함
- resolve(value) — 일이 성공적으로 끝난 경우 그 결과를 나타내는 value와 함께 호출
- reject(error) — 에러 발생 시 에러 객체를 나타내는 error와 함께 호출
executor의 인수 resolve와 reject는 자바스크립트에서 자체 제공하는 콜백
개발자는 resolve와 reject를 신경 쓰지 않고 executor 안 코드만 작성하면 됨
executor에선 결과를 언제 얻든 상관없이 상황에따라 인스로 넘겨준 콜백중 하나를 반드시 호풀해야함
한줄요약!
executor는 자동으로 실행되는데 여기서 원하는 일이 처리됨 처리가 끝나면 executor는 처리 성공 여부에 따라 resolve나 reject를 호출
소비자: then, catch, finally
.then 프라미스에서 가장 중요하고 기본이 되는 메서드
문법
promise.then(
function(result) { /* 결과(result)를 다룹니다 */ },
function(error) { /* 에러(error)를 다룹니다 */ }
);.then의 첫번째 인수는 프라미스가 이행됐을때 실행, 여기서 실행결과받음
.then의 두전째 인수는 프라미스가 거부됐을때 실행, 여기서 에러 받음
catch
| 프라미스 | 콜백 |
| 프라미스를 이용하면 흐름이 자연스럽다 loasscript(scriqt)로 스크립트를 읽고 결과에 따라 그 다음(.then)에 무엇을 할지에 대한 코드 작성하면 됨 | loadScript(script,callback)호출할 때, 함께 호출할 callback함수가 준비되어있어야함 loadScript를 호출하기 이전에 호출결과로 무엇을 할지 미리 알고있어야함 |
| 프라미스에 원하는 만큼 .then 호출가능 .then 호출하는것은 새로운 팬을 구독 리스트에 추가 하는 것과 같다 | 콜백은 하나만 가능 |
프라미스와 에러 핸들링
암시적 try..catch
프라미스와 프라미스 핸들러코드 주위엔 보이지않는(암시적)try..catch가 있음
예외 발생시 암시적 try..catch에서 예외를 잡고 이를 reject 처럼 다룸
.catch 는 프라미스에서 발생한 모든 에러를 다룸 reject()가 호출되거나 에러가 던져지면 .catch에서 이를 처리
프라미스 API
promise클래스에는 5가지 정적 메서드가 있음
promise.all
let promise = Promise.all([...promises...]);Promise.all(promises)
모든 프라미스가 이행될 때까지 기다렸다가 그 결괏값을 담은 배열을 반환
주어진 프라미스 중 하나라도 실패하면 Promise.all는 거부되고, 나머지 프라미스의 결과는 무시
Promise.allSettled
Promise.all([
fetch('/template.html'),
fetch('/style.css'),
fetch('/data.json')
]).then(render); // render 메서드는 fetch 결과 전부가 있어야 제대로 동작합니다.Promise.allSettled(promises)
최근에 추가된 메서드로 모든 프라미스가 처리될 때까지 기다렸다가 그 결과(객체)를 담은 배열을 반환
객체엔 다음과 같은 정보가 담김
- 응답이 성공할 경우 – {status:"fulfilled", value:result}
- 에러가 발생한 경우 – {status:"rejected", reason:error}
- status: "fulfilled" 또는 "rejected"
- value(프라미스가 성공한 경우) 또는 reason(프라미스가 실패한 경우)
Promise.race
let promise = Promise.race(iterable);Promise.race(promises)
가장 먼저 처리된 프라미스의 결과 또는 에러를 담은 프라미스를 반환.
Promise.resolve와 Promise.reject
Promise.resolve(value)
주어진 값을 사용해 이행 상태의 프라미스를 만듦
아래 코드와 동일한 일 수행
let promise = new Promise(resolve => resolve(value));
Promise.reject(error)
주어진 에러를 사용해 거부 상태의 프라미스를 만듦
아래 코드와 동일한 일 수행
let promise = new Promise((resolve, reject) => reject(error));
실무에선 다섯 메서드 중 Promise.all을 가장 많이 사용
프라미스화
콜백을 받는 함수를 프라미스를 반환한느 함수로 바꾸는 것을 프라미스화(promisification)라고 함
asyn와 await
async 함수
async function f() {
return 1;
}async는 function앞에 위치, 해당함수는 항상 프라미스를 반환함
프라미스가 아닌 값을 반환하더라도 이행상태의 프라미스로 값을 감싸 이행된 프라미스가 반환되도록 함
await
// await는 async 함수 안에서만 동작합니다.
let value = await promise;js는 await 키워드를 만나면 프라미스가 처리될 때까지 기다림, 결과는 그 이후 반환
일반 함수엔 await사용 할 수 없다 ! 오직 async함수에서만 !
await는 최상위 레벨코드에서 작동하지 않는다 !
await는 'thenable' 객체를 받는다 !
에러 핸들링
프라미스가 정상적으로 이행되면 await promise는 프라미스 객체의 result에 저장된 값 반환
반면 프라미스가 거부되면 마치 throw문을 작성한 것처럼 에러가 던져짐
async function f() {
await Promise.reject(new Error("에러 발생!"));
}
async function f() {
throw new Error("에러 발생!");
}
//코드 동일