자바스크립트 리펙토링

static/youtube-dl_thumbnail.js

@@ -1,29 +1,47 @@
 'use strict';
 
-const url = document.getElementById('url');
-const download_btn = document.getElementById('download_btn');
-
-// 다운로드
-download_btn.addEventListener('click', (event) => {
-  event.preventDefault();
-  if (!url.value.startsWith('http')) {
-    notify('URL을 입력하세요.', 'warning');
-    return;
-  }
-
-  fetch(`/${package_name}/ajax/thumbnail`, {
-    method: 'POST',
-    cache: 'no-cache',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
-    },
-    body: get_formdata('#download'),
-  })
-    .then((response) => response.json())
-    .then(() => {
-      notify('분석중..', 'info');
+(() => {
+  const post_ajax = (url, data) => {
+    const loading = document.getElementById('loading');
+    if (loading) {
+      loading.style.display = 'block';
+    }
+    return fetch(`/${package_name}/ajax${url}`, {
+      method: 'POST',
+      cache: 'no-cache',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+      },
+      body: new URLSearchParams(data),
     })
-    .catch(() => {
-      notify('다운로드 요청 실패', 'danger');
-    });
-});
+      .then((response) => response.json())
+      .then((ret) => {
+        if (ret.msg) {
+          notify(ret.msg, ret.ret);
+        }
+        return ret;
+      })
+      .catch(() => {
+        notify('요청 실패', 'danger');
+      })
+      .finally(() => {
+        if (loading) {
+          loading.style.display = 'none';
+        }
+      });
+  };
+
+  const url = document.getElementById('url');
+  const download_btn = document.getElementById('download_btn');
+
+  // 다운로드
+  download_btn.addEventListener('click', (event) => {
+    event.preventDefault();
+    if (!url.value.startsWith('http')) {
+      notify('URL을 입력하세요.', 'warning');
+      return;
+    }
+
+    post_ajax('/thumbnail', get_formdata('#download'));
+  });
+})();