promise와 async, await

new Promise(function(resolve, reject)

{ setTimeout(() => resolve(1), 1000); // (*) })

.then(function(result) { // (**) alert(result); // 1 return result * 2; })

.then(function(result) { // (***) alert(result); // 2 return result * 2; })

.then(function(result) { alert(result); // 4 return result * 2; });

 

프라미스 체이닝은 result가 .then 핸들러의 체인을 통해 전달

1 1초 후 최초 프라미스가 이행

2 이후 첫번쨰 .then 핸들러가 호출

3. 2에서 반환한 값은 다음 .then 핸들러에 전달

4. 이런 과정이 이어짐

 

async함수 

asyncc function f () {

return 1;

}

function 앞에 async를 붙이면 해당 함수는 항상 프라미스 반환, 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스로 값을 

감싸 이행된 프라미스가 반환

 

async function f() {

 return 1;

}

f().then(alert) //1

명시적으로 프라미스 반환도 가능 , 결과는 동일

async가 붙은 함수는 반드시 프라미스를 반환하고 프라미스가 아닌 것은 프라미스로 감싸 반환

 

await

 

let value = await promise;

 

awiat 키워드를 만나면 프라미스가 처리 될 때까지 기다린다. 그리고 반환

 

async function f()

{ let promise = new Promise((resolve, reject) =>

{ setTimeout(() => resolve("완료!"), 1000) });

let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

alert(result); // "완료!" } f();

 

함수를 호출하고 본문이 실행 되었을 때 *에서 실행이 잠시 중단 되었다가 프라미스가 처리되면 실행이 재개된다

await는 프라미스가 처리될 때까지 함수 실행을 기다리게 만듬

프라미스가 처리되면 그 결과와 함께 실행이 재개

await는 promise.then보다 좀 더 세련되게 프라미스의 result값을얻을 수 있게 해줌

 

주의! 일반 함수엔 await을 사용할 수 없다.

function f() {

 let promise = Promise.resolve(1);

 let result = await promise; //

}

 

await는 최상위 레벨 코드에서 사용가능하지 않지만 익명 async함수로 코드를 감싸면 최상위 레벨 코드에서도 사용가능

(async () => {

let response = await fetch(' ' )

let user =await response.json()

})();