-
글쓴이글
-
2022년 3월 3일 13:33 #28643
김태헌참가자Promise 예제 첫 번째 녀석을 하는 중입니다.
로드를 확인할 이미지를 선택해서 Promise를 실행하고 싶어, Promise에 값을 전달하게 함수 형태로 제작을 해보았는데
addEventListner가 작동을 하지 않네요...
총 두 가지 형태로 제작했는데 제가 보기에는 두 형태 모두 문제는 없어 보이는데 뭐가 문제일까요?
===============================================================================
//promise 형태 두가지
const imgPromise = (targetImg)=>{
return new Promise((resolve,reject)=>{
targetImg.addEventListener('load',function(){
console.log(resolve in);
resolve('0000');
});
targetImg.addEventListener('error',function(){
console.log(reject in);
reject('9999');
});
})
}const imgPromise2 =(targetImg)=>{
targetImg.addEventListener("load", function(event){
console.log(resolve in);
return Promise.resolve('0000');
})
targetImg.addEventListener("error",function(event){
console.log(reject in);
return Promise.reject('9999');
})
return Promise.resolve('8888');
}==================================================================
//Promise 호출 시점 onload 또는 레디를 각각 테스트
//윈도우 온로드 시점
window.onload = function(){
const targetImgName = 'test';const targetImg = document.getElementById(
${targetImgName});
//const targetImg = document.querySelector(#${targetImgName});
//프로미스 생성.
const loadPromise = imgPromise(targetImg);
console.log(targetImg);//판별
loadPromise
.then(function(returnCode){
console.log(Image Loading Success retrun code = ${returnCode});
})
.catch(function(returnCode){
console.log(Image Loading Fail retrun code = ${returnCode});
})
.finally(function(){
console.log(End........);
})}
//문서 레디시점
document.addEventListener("DOMContentLoaded", function(){
const targetImgName = 'test';const targetImg = document.getElementById(
${targetImgName});
//const targetImg = document.querySelector(#${targetImgName});
console.log(targetImg);//프로미스 생성.
const loadPromise = imgPromise2(targetImg);//판별
loadPromise
.then(function(returnCode){
console.log(Image Loading Success retrun code = ${returnCode});
})
.catch(function(returnCode){
console.log(Image Loading Fail retrun code = ${returnCode});
})
.finally(function(){
console.log(End........);
})
});2022년 3월 3일 16:43 #28658
김태헌참가자혹시 HTML 구성이 문제일까 해서 HTML도 올려봅니다.
<!DOCTYPE html>
<html lang="ko">
<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">
<link rel="styleesheet" href="./main.css">
<title>Promise</title>
</head>
<body>
<div id="imgDiv">
< img id="test" src="./kona.jpg">
</div>
<script src="./promiseSubject.js"></script>
</body>
</html> -
글쓴이글
- 답변은 로그인 후 가능합니다.