실시간으로 응답이 오지 않는 것은, 기다려야 하는데, 이렇게 별도로 기다리는 것을 비동기(어싱크) 라 한다.
비동기를 쓰는 방법은 2가지 인데, 기본적으로 프라미스가 있고,
좀더 쓰기 편하게 하는 어싱크, 어웨이트가 있다.
보기 1. 프라미스 promise.js
-----------------------------
let promise = new Promise(resolve => {
setTimeout(() => resolve("완료 promise"), 1000);
});
console.log("11");
promise.then(console.log); // 1초 뒤 "완료!" 출력
console.log("12");
-----------------------------
실행 결과
----------------------------
E:\study\promise_async_await>node promise.js
11
12
완료 promise
----------------------------
어싱크는 비동기 함수라는것을 지칭 하는 것이고, 어웨이트는 답 나올때까지 기다리라는 말 이다.
프라미스 함수는 내부 파라메터로 리졸브와 리젝트가 있다.
리졸브는 성공 일때 응답 이고, 리젝트는 실패 일때 응답이다.
보기2
----------------------------
// async는 function 앞에 위치합니다
// await는 async 함수 안에서만 동작합니다.
// 일반 함수엔 await을 사용할 수 없습니다.
// async 함수가 아닌데 await을 사용하면 문법 에러가 발생합니다.
async function f3() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("완료 3"), 1000);
});
let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)
// alert(result); // "완료!"
console.log(result)
}
console.log("11");
f3();
console.log("12");
----------------------------
결과
----------------------------
E:\study\promise_async_await>node aa2.js
11
12
완료 3
----------------------------
보기 3. 어싱크 중첩
----------------------------
async function wait() {
await new Promise(resolve => setTimeout(resolve, 1000));
return 4;
}
function f4() {
// shows 10 after 1 second
wait().then(result => console.log(result));
}
console.log("11");
f4();
console.log("12");
----------------------------
결과
----------------------------
E:\study\promise_async_await>node aa3.js
11
12
4
----------------------------
프로미스가 완료 되면 다음 으로 실행을 .then 으로 할 수 있다.
보기 4
----------------------------
function timer(time){
return new Promise(function(resolve){
setTimeout(function(){
resolve(time);
}, time);
});
}
async function f1() {
console.log('start');
var t = await timer(1000);
console.log('time1 :' + t);
t = await timer(t+1000);
console.log('time2 :' + t);
t = await timer(t+1000);
console.log('time3 :' + t);
console.log('end');
return t;
}
async function f2(){
console.log('parent start');
let t = await f1();
console.log('time :' + t);
console.log('parent end');
}
console.log('parent parent start');
f2().then(function(){
console.log('parent parent end');
})
----------------------------
결과
----------------------------
E:\study\promise_async_await>node aa5.js
parent parent start
parent start
start
time1 :1000
time2 :2000
time3 :3000
end
time :3000
parent end
parent parent end
----------------------------
promise_async_await-220822.zip
0.00MB