v1

Author: SteffenDE

assets/js/phoenix/ajax.ts

@@ -0,0 +1,175 @@
+import {
+  global,
+  XHR_STATES
+} from "./constants"
+
+type HttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE"
+type Headers = Record<string, string>
+type RequestBody = string | null
+type AjaxCallback = (response: any) => void
+type TimeoutCallback = () => void
+
+interface XDomainRequest {
+  timeout: number
+  open(method: string, url: string): void
+  send(body?: string | null): void
+  onload: (() => void) | null
+  ontimeout: (() => void) | null
+  onprogress: (() => void) | null
+  responseText: string
+}
+
+interface XMLHttpRequestLike {
+  open(method: string, url: string, async?: boolean): void
+  send(body?: string | null): void
+  setRequestHeader(name: string, value: string): void
+  timeout: number
+  readyState: number
+  responseText: string
+  onreadystatechange: (() => void) | null
+  onerror: (() => void) | null
+  ontimeout: (() => void) | null
+}
+
+export default class Ajax {
+  static request(
+    method: HttpMethod,
+    endPoint: string,
+    headers: Headers,
+    body: RequestBody,
+    timeout: number,
+    ontimeout: TimeoutCallback | null,
+    callback: AjaxCallback | null
+  ): XMLHttpRequestLike | XDomainRequest | AbortController {
+    if (global.XDomainRequest) {
+      let req = new global.XDomainRequest() // IE8, IE9
+      return this.xdomainRequest(req, method, endPoint, body, timeout, ontimeout, callback)
+    } else if (global.XMLHttpRequest) {
+      let req = new global.XMLHttpRequest() // IE7+, Firefox, Chrome, Opera, Safari
+      return this.xhrRequest(req, method, endPoint, headers, body, timeout, ontimeout, callback)
+    } else if (global.fetch && global.AbortController) {
+      // Fetch with AbortController for modern browsers
+      return this.fetchRequest(method, endPoint, headers, body, timeout, ontimeout, callback)
+    } else {
+      throw new Error("No suitable XMLHttpRequest implementation found")
+    }
+  }
+
+  static fetchRequest(
+    method: HttpMethod,
+    endPoint: string,
+    headers: Headers,
+    body: RequestBody,
+    timeout: number,
+    ontimeout: TimeoutCallback | null,
+    callback: AjaxCallback | null
+  ): AbortController {
+    let options: RequestInit = {
+      method,
+      headers,
+      body,
+    }
+    let controller = new AbortController()
+    if (timeout) {
+      const _timeoutId = setTimeout(() => controller.abort(), timeout)
+      options.signal = controller.signal
+    }
+    global.fetch(endPoint, options)
+      .then(response => response.text())
+      .then(data => this.parseJSON(data))
+      .then(data => callback && callback(data))
+      .catch(err => {
+        if (err.name === "AbortError" && ontimeout) {
+          ontimeout()
+        } else {
+          callback && callback(null)
+        }
+      })
+    return controller
+  }
+
+  static xdomainRequest(
+    req: XDomainRequest,
+    method: HttpMethod,
+    endPoint: string,
+    body: RequestBody,
+    timeout: number,
+    ontimeout: TimeoutCallback | null,
+    callback: AjaxCallback | null
+  ): XDomainRequest {
+    req.timeout = timeout
+    req.open(method, endPoint)
+    req.onload = () => {
+      let response = this.parseJSON(req.responseText)
+      callback && callback(response)
+    }
+    if (ontimeout) { req.ontimeout = ontimeout }
+
+    // Work around bug in IE9 that requires an attached onprogress handler
+    req.onprogress = () => { }
+
+    req.send(body)
+    return req
+  }
+
+  static xhrRequest(
+    req: XMLHttpRequestLike,
+    method: HttpMethod,
+    endPoint: string,
+    headers: Headers,
+    body: RequestBody,
+    timeout: number,
+    ontimeout: TimeoutCallback | null,
+    callback: AjaxCallback | null
+  ): XMLHttpRequestLike {
+    req.open(method, endPoint, true)
+    req.timeout = timeout
+    for (let [key, value] of Object.entries(headers)) {
+      req.setRequestHeader(key, value)
+    }
+    req.onerror = () => callback && callback(null)
+    req.onreadystatechange = () => {
+      if (req.readyState === XHR_STATES.complete && callback) {
+        let response = this.parseJSON(req.responseText)
+        callback(response)
+      }
+    }
+    if (ontimeout) { req.ontimeout = ontimeout }
+
+    req.send(body)
+    return req
+  }
+
+  static parseJSON(resp: string | null | undefined): any {
+    if (!resp || resp === "") { return null }
+
+    try {
+      return JSON.parse(resp)
+    } catch {
+      console && console.log("failed to parse JSON response", resp)
+      return null
+    }
+  }
+
+  static serialize(obj: Record<string, any>, parentKey?: string): string {
+    let queryStr: string[] = []
+    for (var key in obj) {
+      if (!Object.prototype.hasOwnProperty.call(obj, key)) { continue }
+      let paramKey = parentKey ? `${parentKey}[${key}]` : key
+      let paramVal = obj[key]
+      if (typeof paramVal === "object") {
+        queryStr.push(this.serialize(paramVal, paramKey))
+      } else {
+        queryStr.push(encodeURIComponent(paramKey) + "=" + encodeURIComponent(paramVal))
+      }
+    }
+    return queryStr.join("&")
+  }
+
+  static appendParams(url: string, params: Record<string, any>): string {
+    if (Object.keys(params).length === 0) { return url }
+
+    let prefix = url.match(/\?/) ? "&" : "?"
+    return `${url}${prefix}${this.serialize(params)}`
+  }
+}