promise.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 수행중이면 pending
// 수행이 종료되면 fullfilled
// 수행중 오류 발생 rejected
// 💚 1. Promise 프로듀서 (promise 제공)
// resolve 에러발생 X , reject 에러 발생 했을 때
const promise = new Promise((resolve, reject) => {
console.log('수행중 ...');
setTimeout(() => {
resolve('성공한 결과');
// reject('에러 발생');
// reject(new Error('찾을 수 없음'));
console.log(promise);
}, 2000);
})
// 💚 2. Promise 컨슈머 (promise 사용) --> then , catch , finally
// promise.then(value => {
// console.log(value);
// })
// promise.then(
// // 🧡 화살표 함수에 익숙해지기
// // 중괄호 생략 가능
// // (a)=>console.log(a), (e)=>{console.log(e)}
// a => { // 결과를 다룹니다.
// console.log('resolve 실행 - 성공');
// console.log(a);
// },
// function(e){ // 에러를 다룹니다.
// console.log('reject 실행 - 에러');
// console.log(e);
// },
// )
// 💚 성공한 결과는 then이 처리, 실패하면 catch가 처리 ,
// 성공해도 실패해도 그냥 끝나면 실행 finally
promise.then(value => {
console.log(value);
})
.catch(error => {
console.log(error);
})
.finally(() => {
console.log('끝');
})
</script>
</body>
</html>
promise.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const promise = new Promise ((resolve, reject)=>{ // 콜백함수 (resolve, reject) 넣어줌
console.log("수행중...");
setTimeout(() => {
// resolve("안녕하세요~"); // 성공 // 실패시 reject
reject(new Error('not found'));
}, 2000);
})
// ◼️ 결과 ) 수행중
promise.then(value=> console.log(value) ) // then ) resolve 받음
.catch(error=> console.log(error) ) // catch ) reject 받음
.finally(()=>{ // 마지막에 한 번 그냥 실행됨
console.log("끝!");
})
// ◼️ 결과 ) 끝!
function fetchUser() {
return new Promise((resolve, reject) => {
// return "green";
resolve("프로미스 성공");
})
}
const user = fetchUser();
console.log(user);
// ◼️ 결과 ) 프로미스 성공
const fetchNumber = new Promise((resolve, reject)=>{
setTimeout(()=> resolve(1), 1000)
})
// then은 값을 전달할 수도 있고 또 다른 프로미스도 전달할 수 있음
fetchNumber.then(num => num * 2)
.then(num => num * 3)
.then(num => {
return new Promise((resolve, reject)=>{
setTimeout(()=> resolve(num - 1), 1000)
})
}).then(num => console.log(num));
// ◼️ 결과 ) 5
function getHen() {
return new Promise((resolve, reject) => {
setTimeout(()=>resolve('닭'),1000);
})
}
function getEgg() {
return new Promise ((resolve, reject) => {
setTimeout(()=>reject(new Error("계란 없음")),1000)
})
}
function cook(egg) {
return new Promise((resolve, reject) => {
setTimeout(resolve(egg+"후라이"), 1000)
})
}
getHen()
.then(getEgg)
.catch(error=>{
return '맛있는 ';
}).then(cook).then(console.log);
// ◼️ 결과 ) 맛있는 후라이
// 🧡 asycnc 를 함수 앞에 적으면 프로미스를 쓰지 않아도 함수 안에
// 블럭이 프로미스로 적용됨
// await
// async 가 붙은 함수안에서만 사용할 수 있음
function delay(ms) { // ms = 시간
return new Promise((resolve, reject) =>
setTimeout(resolve, ms));
}
async function getApple() {
await delay(2000);
return '사과';
}
async function getBanana() {
await delay(2000);
return '바나나';
}
async function pickFruits() {
const apple = await getApple();
const banana = await getBanana();
return `${apple} + ${banana}`;
}
// pickFruits().then(console.log);
// ◼️ 결과 ) 사과 + 바나나
// 🧡 함수 앞에 async가 붙으면 해당 함수는 항상 프로미스를 반환
// 프로미스가 아닌 것을 프로미스로 감싸서 반환
async function asyfu() {
return 1;
}
asyfu().then(console.log);
// ◼️ 결과 ) 1
async function asyfu2() {
return Promise.resolve(1);
}
asyfu2().then(console.log);
// ◼️ 결과 ) 1
// 🧡 await은 async 키워드가 있는 함수 안에서만 사용가능
// await은 프로미스가 처리 될 때까지 기다림
async function promiseF() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve('완료'), 1000)
});
let result = await promise; // await 가 동작할 때까지 기다림, 비동기 전송값을 기다림(완료)
}
// 🧡 에러 핸들링
// async function f() {
// await Promise.reject(new Error('에러 ~~~ @@@'));
// }
// async function f() {
// throw new Error('에러 ~~~ @@@');
// }
async function f() {
try { // 값을 담아줘야됨 // response에 값을 바로 담지않고 ('__') 값을 다 받아올때까지 기다렸다가 담음
let response = await fetch('유효하지않은 주소 ~~');
}
catch (e) {
console.log(f);
}
}
</script>
</body>
</html>
