1)
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("안녕안녕안녕");
},2000)
})
promise.then(value=>console.log(value))
.catch(error=>console.log(error))
.finally(()=>{
console.log("끝났어요");
})
function fetchUser(){
return new Promise((resolve,reject)=>{
resolve("프로미스 성공"); // resolve 호출 시 fulfilled 상태
// reject(new Error('ddddd'));
})
}
const user = fetchUser(); // resolve 호출하지 않았을 때는 pending 상태
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));
}
// delay(5000).then(console.log('haha'));
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가 붙으면 해당 함수는 항상 프로미스를 반환
// 프로미스가 아닌 것을 프로미스로 감싸서 반환
// await : 프로미스가 처리될 때까지 기다림
// await : async 키워드가 있는 함수안에서만 사용가능
async function asyfu(){
return 1;
}
asyfu().then(console.log);
async function asyfu2(){
return Promise.resolve(1);
}
asyfu2().then(console.log);
async function promiseF(){
let promise = new Promise((resolve,reject)=>{
setTimeout(()=>resolve("완료"),1000);
});
let result = await promise;
}
// 에러 핸들링
async function f(){
await Promise.reject(new Error("에러발생!!!!"));
}
async function f(){
throw new Error("에러발생!!!!");
}
async function f(){
try {
let response = await fetch('유효하지않은 주소');
}
catch(e) {
console.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; // 에러발생 위한 것
// }
// 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(json2);
if(!user2.name){
throw new SyntaxError("불완전한 데이터 : 이름없음");
}
}
catch(e) {
console.log('catch실행');
console.log(e.name);
console.log(e.message);
}
// throw연산자 - 에러 처리를 통보
// throw <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>'노력이 좋아서' 카테고리의 다른 글
| <step71>'react_shoppingmall홈페이지 구현_step3' (0) | 2022.07.01 |
|---|---|
| <step70>'react_shoppingmall홈페이지 구현_step2' (0) | 2022.06.30 |
| <step69>'react_shoppingmall홈페이지 구현_step1' (0) | 2022.06.29 |
| <step69>'react_axios2' (0) | 2022.06.29 |
| <step69>'react_axios' (0) | 2022.06.28 |