Stack/JavaScript
[JS] Promise / Async / 에러 핸들링 복습
7ingout
2022. 6. 30. 10:40
Promise new Promise 선언할 때 P 대문자로 적을 것 !
Async는 Promise를 간편하게? 쓰도록 해주는 애
에러 핸들링
try...catch 문법
try {
코드작성
}
catch(e) {
코드작성
}
복습/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)=> {
console.log("수행중...");
setTimeout(()=> {
// resolve("안녕안녕안녕");
reject(new Error('not found'));
}, 2000)
})
// 프로미스 사용
promise.then(value=>console.log(value))
.catch(error=>console.log(error))
.finally(()=>{
console.log("끝났어요");
})
// function fetchUser() {
// return new Promise((resolve, reject)=>{
// // resolve("프로미스 성공"); // 프로미스는 fulfilld 상태가 됨
// reject(new Error('dddd'));
// // return "green";
// })
// }
// // resolve나 reject가 호출되어야 프로미스는 끝이 남
// 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));
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);
// Async를 함수 앞에 적으면 프로미스를 쓰지 않아도 함수 안에 블럭이 프로미스로 적용됨
// await
// async가 붙은 함수안에서만 사용할 수 있음
function delay(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);
async function asyfu2(){
return Promise.resolve(1);
}
asyfu2().then(console.log);
// await은 async가 붙어있는 함수 안에서만 사용 가능
// await 프로미스가 처리될 때까지 기다림
// await은 async 키워드가 있는 함수 안에서만 사용 가능 !!
async function promiseF() {
let promise = new Promise((resolve, reject)=> {
setTimeout(()=>resolve("완료!"), 1000)
});
let result = await promise;
// await promise 하면 promise가 하는 일 다 끝내고 result에 담아줌 (위의 예시에서는 1초 뒤)
}
// 에러 핸들링
// async function f(){
// await Promise.reject(new Error("에러발생!!!!"));
// }
// async function f(){
// throw new Error("에러발생!!!!");
// }
async function f() {
try{
let response = await fetch('유효하지않은 주소');
}
catch(e){
cosnole.log(e);
}
}
</script>
</body>
</html>
복습/error.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>
// try {
// alert('try 블럭 실행');
// green; // 선언되지도 않은 green 호출 해서 에러 만들기
// }
// catch(e) {
// alert('catch 블럭 실행');
// }
let json = '{"name""green", "age":30}';
try {
let user = JSON.parse(json);
console.log(user.name);
console.log(user.age);
}
catch(e) {
console.log("데이터에 에러가 있어 재요청을 합니다.");
}
let json2 = '{"age": 20}';
try {
let user2 = JSON.parse(json);
// console.log(user2.name);
// 이름이 없으므로 에러가 발생
if(!user2.name) {
throw new SyntaxError("불완전한데이터: 이름없음");
}
}
catch(e) {
console.log('catch 실행');
console.log(e.name);
console.log(e.message);
}
// throw 연산자 - 에러처리를 통보
// trhow <error object>
// 자바스크립트 에러 객체 생성자
// Error, SyntaxError, ReferenceError, TypeError
let error = new Error("에러가 생겼어요");
// new SyntaxError(message);
// new ReferenceError(message);
console.log(error);
console.log(error.name);
console.log(error.message)
</script>
</body>
</html>