// 커피를 만드는 함수. setTimeout 안 console.log()가 출력되며
// 출력 시간은 랜덤하게 실행된다.
let makeCoffie = (coffieOper) =>{
let ranTime = Math.floor(Math.random() * 100)+1
//주어진 시간 후에 다음을 실행해라
setTimeout(() => {
console.log(coffieOper+" "+ranTime+"ms초");
},
ranTime
)
}
//커피 주문 함수, 함수가 실행되면 makeCoffie() 3개가 실행된다.
let coffieOrder = () => {
makeCoffie("커피콩 그라인딩");
makeCoffie("스팀추출");
makeCoffie("커피 완성");
}
//작업은 비동기로 이루어지나 작업 시간이 먼저 끝나는 업무가 먼저 출력되는 문제가 생겼다.
//동기화(setTimeout없이) 실행하면 세 작업은 작성 순서대로 출력되었을 것이다.(그라인딩, 추출, 완성)
coffieOrder()
커피 완성 59ms초
커피콩 그라인딩 73ms초
스팀추출 74ms초
coffieOrder()
커피 완성 8ms초
커피콩 그라인딩 65ms초
스팀추출 62ms초
coffieOrder()
스팀추출 24ms초
커피콩 그라인딩 37ms초
커피 완성 72ms
// 커피를 만드는 함수. setTimeout 안 console.log()가 출력되며
// 출력 시간은 랜덤하게 실행된다.
// callback함수 인자를 추가해서 setTimeout이 완료되면 callback함수가 호출되도록 한다.
let makeCoffie = (coffieOper, callback) =>{
let ranTime = Math.floor(Math.random() * 100)+1
//주어진 시간 후에 다음을 실행해라
setTimeout(() => {
console.log(coffieOper+" "+ranTime+"ms초");
//출력 다음에 callback 함수 실행
callback();
},
ranTime
)
}
//커피 주문 함수, 함수가 실행되면 makeCoffie() 3개가 실행된다.
//callback으로 출력 순서를 지정해줄 수 있다.
let coffieOrder = () => {
makeCoffie("커피콩 그라인딩", () =>{
makeCoffie("스팀추출", () =>{
makeCoffie("커피 완성", ()=>{})
})
});
}
//출력 순서가 작성 순서대로 진행된다.
coffieOrder()
undefined
커피콩 그라인딩 13ms초
스팀추출 36ms초
커피 완성 92ms초
coffieOrder()
undefined
커피콩 그라인딩 21ms초
스팀추출 42ms초
커피 완성 11ms초
coffieOrder()
undefined
커피콩 그라인딩 26ms초
스팀추출 96ms초
커피 완성 61ms초
A Promise is a proxy for a value not necessarily known when the promise is created.
It allows you to associate handlers with an asynchronous action's eventual success value or failure reason.
This lets asynchronous methods return values like synchronous methods.
instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.Promise는 Promise가 생성 될 때 반드시 알려지지 않은 값에 대한 프록시입니다.
이를 통해 처리기를 비동기 작업의 최종 성공 값 또는 실패 이유와 연결할 수 있습니다.
이를 통해 비동기 메서드는 동기 메서드와 같은 값을 반환 할 수 있습니다.
즉, 최종 값을 즉시 반환하는 대신, 비동기 메서드는 미래의 특정 시점에 값을 제공하겠다는 약속을 반환합니다.
The Promise.resolve() method returns a Promise object that is resolved with a given value.
If the value is a promise, that promise is returned;
if the value is a thenable (i.e. has a "then" method), the returned promise will "follow" that thenable, adopting its eventual state;
otherwise the returned promise will be fulfilled with the value.
This function flattens nested layers of promise-like objects (e.g. a promise that resolves to a promise that resolves to something) into a single layer.Promise.resolve() 메서드는 지정된 값으로 resolved 해결된 Promise 객체를 반환한다.
value가 promise인 경우 그 promise는 return되고,
value가 실행 가능한 경우(즉, then() 메소드 인 경우), return된 promise는 그 then()의 최종 상태를 채택할 것이다.
그렇지 않으면 return된 promise는 그 값과 함께 fulfilled 될 것이다.
이 함수는 promise와 유사한 객체의 중첩 레이어를 단일 레이어로 병합한다.(e.g. 무언가를 resolve한 promise를 resolve한 promise)
Promise.resolve('Success').then(function(value) {
console.log(value); // "Success"
}, function(value) {
// not called
});
===================================================================================
var p = Promise.resolve([1,2,3]);
p.then(function(v) {
console.log(v[0]); // 1
});
===================================================================================
var original = Promise.resolve(33);
var cast = Promise.resolve(original);
cast.then(function(value) {
console.log('value: ' + value);// value: 33
});
console.log('original === cast ? ' + (original === cast)); //true
original === cast ? true 이게 먼저 출력된다
value: 33
cast
Promise {<fulfilled>: 33}
original
Promise {<fulfilled>: 33}
===================================================================================
A Promise is in one of these states:
pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation was completed successfully.
rejected: meaning that the operation failed.promise의 세 가지 상태
보류: 초기상태, 이행이나 거부가 아닌 상태
이행: 작업이 성공적으로 완료됨
거부: 작업이 실패했음을 의미
// 커피를 만드는 함수. setTimeout 안 console.log()가 출력되며
// 출력 시간은 랜덤하게 실행된다.
// new promise 클래스를 리턴한다.
let makeCoffie = (coffieOper) =>{
return new Promise((resolve, reject) => {
let ranTime = Math.floor(Math.random() * 100)+1
//주어진 시간 후에 다음을 실행해라
setTimeout(() => {
//정상적으로 실행되면 resolve()호출
resolve(coffieOper+" "+ranTime+"ms초");
},
ranTime
)
})
}
//커피 주문 함수, 함수가 실행되면 makeCoffie() 3개가 실행된다.
//callback으로 출력 순서를 지정해줄 수 있다.
let coffieOrder = () => {
makeCoffie("커피콩 그라인딩")
.then((data)=> {
console.log(data)
return makeCoffie("스팀추출")
})
.then((data) =>{
console.log(data)
return makeCoffie("커피 완성")
})
.then((data) =>{
console.log(data)
})
}
coffieOrder()
undefined
커피콩 그라인딩 95ms초
스팀추출 72ms초
커피 완성 84ms초
coffieOrder()
undefined
커피콩 그라인딩 34ms초
스팀추출 56ms초
커피 완성 7ms초
coffieOrder()
undefined
커피콩 그라인딩 38ms초
스팀추출 26ms초
커피 완성 45ms초
someMethod()
.then((returnVal) => {
return returnVal+"추가작업";
}).then((addedReturnVal) => {
return addedReturnVal+"또 작업 추가";
})
The await expression causes async function execution to pause until a Promise is settled (that is, fulfilled or rejected), and to resume execution of the async function after fulfillment. When resumed, the value of the await expression is that of the fulfilled Promise.
If the Promise is rejected, the await expression throws the rejected value.await 표현식은 promise(즉, 이행fulfilled 또는 거부rejected)가 해결될 때까지 비동기 함수 실행을 일시 중지하고 이행 후 비동기 함수의 실행을 재개한다. 다시 시작되면 await 표현식의 value는 이행된 promise value이다.
Promise가 rejected되면 표현식은 rejected value값을 던진다.
// 커피를 만드는 함수. setTimeout 안 console.log()가 출력되며
// 출력 시간은 랜덤하게 실행된다.
// new promise 클래스를 리턴한다.
let makeCoffie = (coffieOper) =>{
return new Promise((resolve, reject) => {
let ranTime = Math.floor(Math.random() * 100)+1
//주어진 시간 후에 다음을 실행해라
setTimeout(() => {
//정상적으로 실행되면 resolve()호출
resolve(coffieOper+" "+ranTime+"ms초");
},
ranTime
)
})
}
//커피 주문 함수, 함수가 실행되면 makeCoffie() 3개가 실행된다.
//callback으로 출력 순서를 지정해줄 수 있다.
//callback 앞에 async를 붙인 다음 내부에서 함수를 동기화 함수 작성하듯 작성한다.
let coffieOrder = async () => {
let a = await makeCoffie("커피콩 그라인딩")
console.log(a)
let b = await makeCoffie("스팀추출")
console.log(b)
let c = await makeCoffie("커피 완성")
console.log(c)
}
coffieOrder()
Promise {<pending>}
커피콩 그라인딩 70ms초
스팀추출 97ms초
커피 완성 79ms초
coffieOrder()
Promise {<pending>}
커피콩 그라인딩 49ms초
스팀추출 68ms초
커피 완성 86ms초
coffieOrder()
Promise {<pending>}
커피콩 그라인딩 47ms초
스팀추출 20ms초
커피 완성 93ms초