728x90
Javascript는 파일 읽기, 쓰기, 등 많은 비동기 작업이 필요하다. 그 중 대표적으로 사용되는 것이 Promise이다.
function promiseStudy(param){
return new Promise(function(resolve, reject){
setTimeout(function(){
if(param){
resolve("성공")
}else{
reject("실패")
}
}, 3000)
})
}
setTimeout( function(){
promiseStudy(true).then(function(temp){
console.log(temp)
})
promiseStudy(true).then(function(){
console.log("그냥 끝났어요.")
})
}, 3000 );
위 코드를 실행하면 "성공" 이 출력된다. 하나하나 살펴보자.
function promiseStudy(param){
return new Promise(function(resolve, reject){
setTimeout(function(){
if(param){
resolve("성공")
}else{
reject("실패")
}
}, 3000)
})
}
- 이 함수는 Promise를 반환한다. Promise는 위처럼 두가지 상태를 받는다. resolve, reject는 각각 상황에서 취할 function이다.
setTimeout( function(){
promiseStudy(true).then(function(temp){
console.log(temp)
})
promiseStudy(true).then(function(){
console.log("그냥 끝났어요.")
})
}, 3000 );
- 같은 프로미스의 두 다른 then을 정의할 수 있다.
const promise = promiseStudy(true).then(
()=>{
console.log("성공시 나올거에요.")
},
()=>{
console.log("실패시 나올거에요.")
}
)
setTimeout( function(){
promise.then(()=>{
console.log("성공하면 두개 나와요")
})
}, 3000 );
이런것도 되더라!! promise 참 신기한 녀석이다.
그런데 만약
function promiseStudy(param){
return new Promise(function(resolve, reject){
setTimeout(function(){
if(param){
resolve("성공")
}else{
reject("실패")
}
}, 3000)
})
}
const promise = promiseStudy(true).then(
(result)=>{
return result;
},
(result)=>{
return result;
}
)
const promiseResult = promise.then((result) => {return result});
console.log(promiseResult)
이런 코드가 있다고 해보자. 지금 promiseResult는 기다리지 않기 때문에 현재 출력값은 Promise { <pending> }
가 된다.
이것을 원하지 않을 것이다. 그렇다고 위처럼 계속 setTime을 할 수도 없다.
때문에 async await을 활용해본다.
async function setValue() {
const promiseResult = await promiseStudy(true).then(
(result)=>{
return result;
},
(result)=>{
return result;
}
)
console.log(promiseResult)
}
setValue();
이렇게 사용할수가 있다.
'Dev > JavaScript' 카테고리의 다른 글
JavaScript - var, let , const 차이 (0) | 2024.06.26 |
---|---|
JavaScript - 자바스크립트의 클래스 (0) | 2024.06.26 |
javascript - 객체 정렬 (0) | 2024.06.26 |
JavaScript - 고차함수(map, fill, reduce) (0) | 2024.06.25 |
JavaScript - 이벤트 핸들러 (0) | 2023.12.25 |