코어자바스크립트 4장 part2 ( Promise , async await )
Promise
기본틀
new Promise(function(resolve){
비동기 함수
}).then(function(value){
return new Promise(function(resolve){
비동기 함수
})
}).then(function(value){
return new Promise(function(resolve){
비동기 함수
})
})
or
function 함수(){
return new Promise(function(resolve){
비동기 함수
})
}
함수().then(function(value){
return new Promise(function(resolve){
비동기 함수
})
}).then(function(value){
return new Promise(function(resolve){
비동기 함수
})
})
시작 내용
1. new Promisenew Promise(function(resolve){ 비동기 함수 }).then(~~~)
- 함수형태
function 함수(){ return new Promise(function(resolve){ 비동기 함수 }) } 함수().then(~~~)
then이후 형태
function(이전에서 리턴한 매개변수){ return new Promise(function(resolve){ .... resolve(값); })}
Promise 사용 예시
new Promise(function (resolve){
setTimeout(function(){
var name = '에스프레소';
console.log(name);
resolve(name);
},500)
}).then(function(prevName){
return new Promise(function(resolve){
setTimeout(function(){
var name = prevName + ', 아메리카노';
console.log(name);
resolve(name);
},500);
})
}).then(function(prevName){
return new Promise(function(resolve){
setTimeout(function(){
var name = prevName + ',카페모카';
console.log(name);
resolve(name);
},500);
})
}).then(function(prevName){
return new Promise(function(resolve){
setTimeout(function(){
var name = prevName + ',카페라떼';
console.log(name);
resolve(name);
},500);
})
})
async await
함수 내부에서 실질적인 비동기 작업이 필요한 위치마자 await 표기
async await 사용 예시
var addCoffee = function(name){
return new Promise(function(resolve){
setTimeout(function(){
resolve(name);
},500);
})
}
var coffeeMaker = async function(){
var coffeeList = '';
coffeeList += (coffeeList ? ',' : '') + await addCoffee('에스프레소');
console.log(coffeeList);
coffeeList += (coffeeList ? ',' : '') + await addCoffee('아메리카');
console.log(coffeeList);
coffeeList += (coffeeList ? ',' : '') + await addCoffee('카페모카');
console.log(coffeeList);
coffeeList += (coffeeList ? ',' : '') + await addCoffee('카페라떼');
console.log(coffeeList);
}
coffeeMaker()
실제 위의 내용을 함수로 표현해서 정리해보면 아래와 같다.
var addCoffee = function(name){
return new Promise(function(resolve){
setTimeout(function(){
resolve(name);
},500);
})
}
var coffeeMaker = async function(){
var coffeeList = '';
var _addCoffee = async function(name){
coffeeList += (coffeeList ? ',' : '') + await addCoffee(name);
}
await _addCoffee('에스프레소');
console.log(coffeeList);
await _addCoffee('아메리카');
console.log(coffeeList);
await _addCoffee('카페모카');
console.log(coffeeList);
await _addCoffee('카페라떼');
console.log(coffeeList);
}
비동기와 관련된 부분들에 await을 포함시키고 이를 포함하는 함수는 async를 붙여준다.
Author And Source
이 문제에 관하여(코어자바스크립트 4장 part2 ( Promise , async await )), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@khw970421/코어자바스크립트-4장-part2-Promise-async-await저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)