Javascript/GMA(2302~)
230807 자바스크립트 비동기 처리 방식 복습
hyerin1201
2023. 8. 7. 19:12
1. 콜백함수
2. 프로미스 객체 ( ES 2015 )
3. async, await ( ES 2017 )
1. 콜백함수
**의도적 비동기처리
//자바스크립트의 동기처리 방식 예시
function displayA() {
console.log("A");
}
function displayB() {
console.log("B");
}
function displayC() {
console.log("C");
}
displayA();
displayB();
displayC();
//A
//B
//C
//자바스크립트의 비동기 처리방식 예시 1.callback함수 - setTimeout
// A -> C -> B 로 출력하기
function displayAa() {
console.log("A");
}
function displayBb() {
setTimeout(() => console.log("B"), 1000);
}
function displayCc() {
console.log("C");
}
displayAa();
displayBb();
displayCc();
// A
// C
// B
//자바스크립트 비동기 처리방식 예시 2.callback함수
// A -> B -> C
function displayAaa() {
console.log("A");
}
function displayBbb(callback) {
setTimeout(() => {
console.log("B");
callback();
}, 2000);
}
function displayCcc() {
console.log("C");
}
displayAaa();
displayBbb(displayCcc);
// A
// B
// C
자바스크립트 비동기 처리방식 예시 2. - 의도적 비동기 처리
function order(coffee, callback) {
console.log(`${coffee} 주문접수`);
setTimeout(() => {
callback(coffee);
}, 3000);
}
function display(result) {
console.log(`${result} 준비완료`);
}
order("아이스 아메리카노", display);
//아이스 아메리카노 주문접수
//아이스 아메리카노 준비완료
콜백함수의 무분별 사용..! 예시
function displayLetter() {
console.log("A");
setTimeout(() => {
console.log("B");
setTimeout(() => {
console.log("C");
setTimeout(() => {
console.log("D");
setTimeout(() => {
console.log("stop!");
}, 1000);
}, 1000);
}, 1000);
}, 1000);
}
displayLetter();
2. 프로미스 객체 ( ES 2015 )
프로미스 객체 활용 비동기 처리방식 예시
**finally : 공통적으로 실행되는 실행문 사용으로 종결된다.
let likePizza = true;
//제작코드
const pizza = new Promise((resolve, reject) => {
if (likePizza) resolve("피자를 주문합니다.");
else reject("피자를 주문하지 않습니다.");
});
//실행코드
pizza
.then((result) => console.log(result))
.catch((err) => console.log(err))
.finally(() => console.log("완료"));
// 피자를 주문합니다.
// 완료.
** 프로미스 객체 진행상태 : pending(대기) -> fulfilled(처리성공) / rejected(처리실패)
프로미스 객체 예제 2
html
<body>
<div id="container">
<div class="start"></div>
<div class="end"></div>
</div>
</body>css
#container {
width: 300px;
margin: 20px auto;
}
.start {
padding: 10px;
}
.done {
color: #999;
font-size: 0.8em;
font-style: italic;
text-decoration: line-through;
}
.active {
padding: 10px 20px;
background-color: #222;
color: #fff;
}
js
const order = new Promise((resolve, reject) => {
let coffee = prompt("어떤 커피를 주문하시겠습니까", "아메리카노");
if (coffee != null && coffee != "") {
document.querySelector(".start").innerText = `${coffee} 주문접수!`;
setTimeout(() => {
resolve(coffee);
}, 3000);
} else {
reject("커피를 주문하지 않았습니다.");
}
});
function display(result) {
document.querySelector(".end").innerText = `${result} 준비완료`;
document.querySelector(".end").classList.add("active");
document.querySelector(".start").classList.add("done");
}
function showError(err) {
document.querySelector(".start").innerText = err;
}
order.then((result) => display(result)).catch((err) => showError(err));
**Promise 객체에서 then( )메서드 체이닝 기법 사용 예시
const pizza = () => {
return new Promise((resolve, reject) => {
resolve("피자를 주문합니다.");
});
};
const step1 = (message) => {
console.log(message);
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("피자도우 준비");
}, 3000);
});
};
const step2 = (message) => {
console.log(message);
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("토핑완료");
}, 3000);
});
};
const step3 = (message) => {
console.log(message);
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("굽기완료");
}, 3000);
});
};
pizza()
.then((result) => step1(result))
.then((result) => step2(result))
.then((result) => step3(result))
.then((result) => console.log(result))
.then(() => {
console.log("피자가 준비되었습니다.");
});
***자바스크립트 외부에서 데이터를 받아오는 역할을 하는 함수 fetch( ) => Promise 객체 반환 => then( ) / catch( )
*참고하기!
https://hyerin1201.tistory.com/54
23.04.27 자바스크립트 JSON데이터를 프로미스 객체로 반환하는 fetch( ), async함수
서버에 있는 JSON파일을 가져올때 사용하는 객체 이름은? XMLHttpRequest() => fetch() 최근에는 fetch()를 많이 사용 -> promise객체를 반환할 수 있기 때문! //fetch()를 활용하여 데이터 출력해보기 fetch("student
hyerin1201.tistory.com