일반적인 코드 진행 순서
- 위에서 아래로
- 오래 걸리는 작업은 대기시간이 생김
콜백
나중에 사용할 함수를 미리 넣어놓는 것
콜백을 이용해서 통신 이후 응답이 오면 코드를 실행하게 만듦 - 비동기
프로미스
동기와 비동기(프로미스)
동기
- 판매자가 택배 상자에 상품 넣기
- 구매자가 택배 상자 받기
- 구매자가 택배 상자 열기
- 구매자가 상품 꺼내기
비동기 (프로미스)
상품이 나중에 들어오는 택배상자
1. 판매자가 택배상자를 구매자에게 보냄
2. 구매자가 택배상자를 받았으나 안에 상품이 없는 상태
3. 상품이 없으면 안열림 / 상품이 있으면 자동으로 열림
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const bool = false;
// 프로미스
const promise = new Promise((resolve, reject) => {
// 프로미스 내에서 작업을 하고
// 작업 성공 시 resolve 실행 / 실패 시 reject 실행
setTimeout(() => {
if(bool){
resolve("작업 성공");
} else {
reject("작업 실패");
}
}, 3000);
// if(bool){
// resolve("작업 성공");
// } else {
// reject("작업 실패");
// };
});
promise
// resolve로 결과가 나오면 then 안에 있는 콜백함수 실행
.then((value) => {
console.log(value);
})
// reject로 결과가 나오면 catch 안에 있는 콜백함수 실행
.catch((value) => {
console.log(value);
})
// 무조건 실행
.finally(() => {
console.log("finally");
});
console.log("프로미스 작성 이후 코드 실행")
</script>
</body>
</html>실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 할일
// 세탁기 돌리기 - 세탁 끝나면 빨래감 널기 - 라면 먹기
// 세탁기 돌리기를 promise로,
// 세탁 시작할 때 "세탁을 시작합니다"
// 세탁기가 다 돌아가면 "빨래감을 널었습니다"
// 라면 다 먹으면 "라면을 먹었습니다"
const promise = new Promise((resolve, reject) => {
alert("세탁을 시작합니다");
const status = Math.round(Math.random());
if(status){
setTimeout(() => {
alert("세탁 완료");
}, 3000);
} else {
alert("세탁기가 고장났습니다...");
};
});
promise
.then((value) => {
alert(value);
})
.catch((value) => {
alert(value);
})
.finally(() => {
alert("할 일 끝")
})
// 통신이 오면 resolve안에 값을 넣어서 전달되지만
// resolve가 전달되기만 해도 then으로 넘어가기 때문에
// new Promise((resolve) => {
// resolve("빨래 완료");
// 값을 받아올 필요가 없다
// }).then(() => {
// console.log("빨래감을 널었습니다.");
// });
alert("라면을 먹었습니다");
</script>
</body>
</html>
유승한