From ebbd49cce5f4bbcd887c3a95d29f7f2bc703c2d3 Mon Sep 17 00:00:00 2001
From: Guanran Wang <guanran928@outlook.com>
Date: Sun, 27 Oct 2024 12:28:54 +0800
Subject: [PATCH] chore(ui): refactor js again

---
 ui/src/main.ts | 147 +++++++++++++++++++++++--------------------------
 1 file changed, 69 insertions(+), 78 deletions(-)

diff --git a/ui/src/main.ts b/ui/src/main.ts
index 17f8547..5e792af 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -1,85 +1,76 @@
 async function main() {
-  const [ny4, ipsb, speedtestcn, ipapiis] = await Promise.allSettled([
-    fetchAsync("https://ip.ny4.dev/api/v1/ip"),
-    fetchAsync("https://api.ip.sb/geoip"),
-    fetchAsync("https://api-v3.speedtest.cn/ip"),
-    fetchAsync("https://api.ipapi.is/"),
-  ]);
+  fetch("https://ip.ny4.dev/api/v1/ip")
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+      return response.json();
+    })
+    .then((data) => {
+      document.getElementById("check-ny4-ip")!.innerHTML = data.ip;
+      document.getElementById("check-ny4-location")!.innerHTML = [
+        data.city,
+        data.region,
+        data.country,
+        data.organization,
+      ].join(", ");
+    })
+    .catch((error) => console.log("Error fetching IP SB data:", error));
 
-  if (ny4.status === "fulfilled") {
-    updateDom("check-ny4-ip", ny4.value.ip);
-    updateDom("check-ny4-location", [
-      ny4.value.city,
-      ny4.value.region,
-      ny4.value.country,
-      ny4.value.organization,
-    ]);
-  } else {
-    updateDom("check-ny4-ip", "Fetch Failed");
-    updateDom("check-ny4-location", "Fetch Failed");
-    console.log("Fetch failed:", ny4.reason);
-  }
+  fetch("https://api.ip.sb/geoip")
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+      return response.json();
+    })
+    .then((data) => {
+      document.getElementById("check-ipsb-ip")!.innerHTML = data.ip;
+      document.getElementById("check-ipsb-location")!.innerHTML = [
+        data.city,
+        data.region,
+        data.country,
+        data.isp,
+      ].join(", ");
+    })
+    .catch((error) => console.log("Error fetching IP SB data:", error));
 
-  if (ipsb.status === "fulfilled") {
-    updateDom("check-ipsb-ip", ipsb.value.ip);
-    updateDom("check-ipsb-location", [
-      ipsb.value.city,
-      ipsb.value.region,
-      ipsb.value.country,
-      ipsb.value.isp,
-    ]);
-  } else {
-    updateDom("check-ipsb-ip", "Fetch Failed");
-    updateDom("check-ipsb-location", "Fetch Failed");
-    console.log("Fetch failed:", ipsb.reason);
-  }
+  fetch("https://api.ipapi.is/")
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+      return response.json();
+    })
+    .then((data) => {
+      document.getElementById("check-ipapiis-ip")!.innerHTML = data.ip;
+      document.getElementById("check-ipapiis-location")!.innerHTML = [
+        data.location.city,
+        data.location.state,
+        data.location.country,
+        data.company.name,
+      ].join(", ");
+    })
+    .catch((error) => console.log("Error fetching IP API IS data:", error));
 
-  if (speedtestcn.status === "fulfilled") {
-    updateDom("check-speedtestcn-ip", speedtestcn.value.data.ip);
-    updateDom("check-speedtestcn-location", [
-      speedtestcn.value.data.city,
-      speedtestcn.value.data.province,
-      speedtestcn.value.data.country,
-      speedtestcn.value.data.isp,
-    ]);
-  } else {
-    updateDom("check-speedtestcn-ip", "Fetch Failed");
-    updateDom("check-speedtestcn-location", "Fetch Failed");
-    console.log("Fetch failed:", speedtestcn.reason);
-  }
-
-  if (ipapiis.status === "fulfilled") {
-    updateDom("check-ipapiis-ip", ipapiis.value.ip);
-    updateDom("check-ipapiis-location", [
-      ipapiis.value.location.city,
-      ipapiis.value.location.state,
-      ipapiis.value.location.country,
-      ipapiis.value.company.name,
-    ]);
-  } else {
-    updateDom("check-ipapiis-ip", "Fetch Failed");
-    updateDom("check-ipapiis-location", "Fetch Failed");
-    console.log("Fetch failed:", ipapiis.reason);
-  }
-}
-
-async function fetchAsync(url: string) {
-  try {
-    const response = await fetch(url);
-    if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
-    }
-    return await response.json();
-  } catch (error) {
-    console.log("Fetch error:", error);
-    throw error;
-  }
-}
-
-function updateDom(elementId: string, content: string | Array<string>) {
-  document.getElementById(elementId)!.innerHTML = Array.isArray(content)
-    ? content.join(", ")
-    : content;
+  fetch("https://api-v3.speedtest.cn/ip")
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+      return response.json();
+    })
+    .then((data) => {
+      const v = data.data;
+      document.getElementById("check-speedtestcn-ip")!.innerHTML = v.ip;
+      document.getElementById("check-speedtestcn-location")!.innerHTML = [
+        v.city,
+        v.province,
+        v.country,
+        v.isp,
+      ].join(", ");
+    })
+    .catch((error) => console.log("Error fetching Speedtest CN data:", error));
 }
 
 window.onload = main;