Upgrade to fetch()

Author: AlexFlipnote

src/js/utils/http.js

@@ -1,21 +1,28 @@
+import manifest from "../../manifest.json"
+
 /**
- * Make an HTTP request
- * @param {string} method - HTTP method (e.g., "GET", "POST")
- * @param {string} url - Request URL
- * @param {function} callback - Callback function to handle the response
+ * Make an HTTP request, returning the response as JSON.
+ * @param {string} method - HTTP method (GET, POST, etc.)
+ * @param {string} url - The URL to send the request to
+ * @returns {Promise<any>} - The response data as JSON
  */
-export const http = (method, url, callback) => {
-  if (!window.XMLHttpRequest) return console.log("This browser does not support requests")
-  const request = new XMLHttpRequest()
-  request.open(method, url, true)
-  request.setRequestHeader("Content-Type", "application/json")
-  request.onload = function () {
-    if (this.status >= 200 && this.status < 400) {
-      const json = JSON.parse(this.response)
-      if (callback && typeof(callback) === "function") {
-        callback(json)
-      }
+export async function http(method, url) {
+  if (!window.fetch) return console.error("This browser does not support requests")
+
+  const response = await fetch(url, {
+    method: method.toUpperCase(),
+    headers: {
+      "Content-Type": "application/json",
+      // The only reason I use X-* headers is because some browsers refuse to set custom "unsafe headers"
+      "X-Referer": "https://alexflipnote.dev/homepage",
+      "X-User-Agent": `AlexFlipnoteHomepage/${manifest.version}`
     }
+  })
+
+  if (!response.ok) {
+    console.error(`HTTP-Error: ${response.status}`, await response.text())
+    return
   }
-  request.send(null)
+
+  return await response.json()
 }

src/js/utils/openstreetmap.js

@@ -66,10 +66,7 @@ export class WorldMap {
  * Has a rate limit of 1 request/second.
  * @param {number} lat - Latitude
  * @param {number} lon - Longitude
- * @param {function} callback - Callback function to handle the response
  */
-export function reverseGeocode(lat, lon, callback) {
-  http("GET", `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json`, (r) => {
-    callback(r)
-  })
+export async function reverseGeocode(lat, lon) {
+  return await http("GET", `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json`)
 }

src/js/utils/weather.js

@@ -32,18 +32,20 @@ export async function getWeather(items, position, lang) {
     }
   }
 
-  http("GET", `https://api.met.no/weatherapi/locationforecast/2.0/compact?lat=${pos.latitude}&lon=${pos.longitude}`, (r) => {
-    const weatherData = new WeatherData(r.properties.timeseries[0].data, lang || "en")
+  const weatherResponse = await http(
+    "GET",
+    `https://api.met.no/weatherapi/locationforecast/2.0/compact?lat=${pos.latitude}&lon=${pos.longitude}`
+  )
 
-    document.getElementById("wicon").src = `images/weather/${weatherData.symbol_code}.png`
-    document.getElementById("wdescription").innerText = weatherData.prettyName()
-    if (items.temp_type === "fahrenheit") {
-      wtemp.innerText = `${Math.round(weatherData.temprature * (9 / 5) + 32)} °F`
-    } else {
-      wtemp.innerText = `${Math.round(weatherData.temprature)} °C`
-    }
-    showWeatherContainer()
-  })
+  const weatherData = new WeatherData(weatherResponse.properties.timeseries[0].data, lang || "en")
+  document.getElementById("wicon").src = `images/weather/${weatherData.symbol_code}.png`
+  document.getElementById("wdescription").innerText = weatherData.prettyName()
+  if (items.temp_type === "fahrenheit") {
+    wtemp.innerText = `${Math.round(weatherData.temprature * (9 / 5) + 32)} °F`
+  } else {
+    wtemp.innerText = `${Math.round(weatherData.temprature)} °C`
+  }
+  showWeatherContainer()
 
   // OpenStreetMap API can be rate limited, so we cache the location name for 1 hour
   const weatherLocation = await cache.get(cacheKey)
@@ -55,13 +57,15 @@ export async function getWeather(items, position, lang) {
     return
   }
 
-  reverseGeocode(pos.latitude, pos.longitude, (r) => {
-    wname.innerText = (
-      r.address.city || r.address.town ||
-      r.address.village || r.address.hamlet ||
+  const geoResponse = await reverseGeocode(pos.latitude, pos.longitude)
+
+  wname.innerText = (
+    geoResponse.address.city || geoResponse.address.town ||
+    geoResponse.address.village || geoResponse.address.hamlet ||
       "Unknown Location"
-    )
-    showWeatherContainer()
-    cache.set(cacheKey, wname.innerText)
-  })
+  )
+  showWeatherContainer()
+  cache.set(cacheKey, wname.innerText)
+
 }
+