바르고 뜨겁게
Javascript - 프로미스(Promise) 본문
Promise 란?
비동기 작업의 결과값(성공,실패)를 저장하고 있는 컨테이너, resolve 와 reject를 통해 원하는 시점에 결과를 리턴할 수 있다.
Promise 생성
const promise = new Promise((resolve, reject)=>{
if(true){
resolve()
}else{
reject()
}
})
Promise를 사용한 콜백 처리.
미국 달러와 원화 , 엔화를 차례대로 서버에 요청하는 예제이다.
CORS를 피해갈 마땅한 GET 요청이 없어서 아래 API 사용했으므로 과다한 호출은 삼가 부탁드립니다.
하지만 아래와 같이 promise 를 사용하면 콜백헬을 극복할 수 있다.
<html>
<head>
<meta charset="utf-8">
</head>
<script>
const reqPromise = async (reqServerApi) => {
return new Promise((resolve, reject) => {
console.log("요청 : " + reqServerApi)
// AJAX HTTP 요청
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === xhr.DONE) {
if (xhr.status === 200 || xhr.status === 201) {
resolve(xhr.responseText) // then
} else {
reject(xhr.status) // catch
}
}
};
xhr.open('GET', reqServerApi);
xhr.send();
})
}
reqPromise('https://earthquake.kr:23490/query/USDKRW')
.then((resData) => {
console.log("요청 결과 1 : " + JSON.stringify(resData)) // USDKRW 환율 결과
return reqPromise('https://earthquake.kr:23490/query/USDJPY')
})
.then((resData) => {
console.log("요청 결과 2 : " + JSON.stringify(resData)) // USDJPY 환율 결과
})
.catch((errData) => {
console.error(JSON.stringify(errData))
})
</script>
<body>
</body>
</html>
요청 : https://earthquake.kr:23490/query/USDKRW
요청 결과 1 : "{\"update\":1602865436646,\"USDKRW\":[1141.43,-3.409912,-0.29785056,1144.84,1144.83,1140.21,1147.53]}"
요청 : https://earthquake.kr:23490/query/USDJPY
요청 결과 2 : "{\"update\":1602865436646,\"USDJPY\":105.377,-0.037002563,-0.035102133,105.414,105.403,105.16,105.442]}"
async/await 패턴
위 패턴을 아래 처럼 변경해서 사용가능하다. 코드줄수는 좀 짧아졌지만 개인적으로는 전자의 패턴이 더 눈에 잘 들어오는듯 함.
<html>
<head>
<meta charset="utf-8">
</head>
<script>
const reqPromise = async (reqServerApi) => {
return new Promise((resolve, reject) => {
console.log("요청 : " + reqServerApi)
// AJAX HTTP 요청
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === xhr.DONE) {
if (xhr.status === 200 || xhr.status === 201) {
resolve(xhr.responseText) // then
} else {
reject(xhr.status) // catch
}
}
};
xhr.open('GET', reqServerApi);
xhr.send();
})
}
async function getRate () {
try{
let resData;
resData = await reqPromise('https://earthquake.kr:23490/query/USDKRW');
console.log("요청 결과 1 : " + JSON.stringify(resData)) // USDKRW 환율 결과
resData = await reqPromise('https://earthquake.kr:23490/query/USDJPY');
console.log("요청 결과 2 : " + JSON.stringify(resData)) // USDJPY 환율 결과
}catch(error){
console.error(error)
}
}
getRate();
</script>
<body>
</body>
</html>
결과는 위와 동일.
환율 API 출처 :
'자바스크립트 > Vanilla Js' 카테고리의 다른 글
| Javascript - fs(파일 시스템) 프로미스 동기 처리 (0) | 2020.11.17 |
|---|---|
| Javascript - 객체 리터럴 (object literal) (0) | 2020.10.16 |
| [JavaScript] 실행 컨텍스트와 호이스팅 (0) | 2020.06.14 |
| JavaScript - setInterval 사용시 func.apply is not a function 에러 (0) | 2019.08.30 |
| Vanilla JS - Array.includes (0) | 2019.05.22 |