const DEFAULT_XHR = {
method: 'POST'
};
function loadImage(param) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function () {
/* 수행 완료 시 처리 */
this.status === 200 ? resolve(window.URL.createObjectURL(this.response)) : reject(this);
};
xhr.option = Object.assign({}, DEFAULT_XHR, param);
xhr.open(xhr.option.method, xhr.option.url);
xhr.send();
});
}
const main = {
async getImage() {
for (const url of this.option.URLS) {
try {
const imageUrl = await loadImage(url);
this.appendImage(imageUrl);
} catch (xhr) {
this.serverError(xhr);
}
}
},
appendImage(imageUrl) {
const image = document.createElement('img');
image.onload = () => {
window.URL.revokeObjectURL(imageUrl);
};
image.src = imageUrl;
document.querySelector('#result')
.appendChild(image);
},
serverError(xhr) {
console.log(xhr.status);
}
};
main.option = {
URLS: [
{url: '../file/code.png'},
{url: '../file/rainbow.png'},
{url: '../file/없음.png'},
{url: '../file/rose.jpg'}
]
};
main.getImage();
main 변수를 선언 하고 그 안에서 해결하니 스코프도 제한되고
보기가 더 깔끔한게 엄청 나이스인거 같습니다!
아직 부족하긴 하지만 그래도 점점 나아가는 것이 제 스스로도 느껴지네요!
항상 좋은 강의 감사합니다.
좋습니다. 이렇게 틀을 만들고 여기에 하나씩 추가하면 모듈, 프레임워크가 됩니다.
답글
twosom
2021.05.06감사합니다! 점점 자신감이 생기는것 같아서 좋습니다 ㅎㅎ