noob-components/.trellis/spec/plugs-http/axios2.md

Axios2 (Second HTTP Client Variant)

Enhanced axios wrapper with router integration and success response handling.

File

plugs/http/axios2.ts

---

Overview

Second iteration of HTTP client. Adds router integration for session timeout navigation and response success checking with automatic message display.

---

Key Differences from Axios

Feature	Axios	Axios2
Router integration	None	registerRouter()
Response handling	Raw data	Checks response.success
Session timeout handling	None	Redirects to /login
String data handling	None	Sets Content-Type: text/plain
Delete method	Custom object	Custom object (same as axios)

---

Axios Instance Configuration

const config = {
  baseURL: process.env.VUE_APP_BASE_URL ? "/api" : "",
  timeout: 60 * 1000,
  withCredentials: true,
};

export const _axios = axios.create(config);

---

Router Registration

let router;

export const registerRouter = (routerP) => {
  router = routerP;
};

---

Request Interceptor

Located at plugs/http/axios2.ts lines 27-48:

_axios.interceptors.request.use(
  function (config) {
    const time = new Date().getTime().toString();
    const params = config.params;
    if (params) {
      delEmpty(params);
      params.t = time;
    }
    const data = config.data;
    if (data != null && typeof data === "object") {
      delEmpty(data);
      data.t = time;
    }
    if (data != null && typeof data === "string" && config?.headers) {
      config.headers["Content-Type"] = "text/plain;charset=UTF-8";
    }
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

Additional Behavior vs Axios

• String data: Sets Content-Type: text/plain;charset=UTF-8 for string payloads

---

Response Handling

Located at plugs/http/axios2.ts lines 149-181:

function handResponse(response, resolve, noMsg, noLoading) {
  if (!noLoading) {
    close();
  }
  if (response.success) {
    if (response.message) {
      if (!noMsg) {
        showMessage("success", response.message);
      }
      resolve(true);
    } else if (response.data) {
      resolve(response.data);
    } else {
      resolve(true);
    }
  } else {
    if (response.message == "session timeout") {
      router?.push("/login");
      response.message = t("http.unLogin");
    }
    if (response.message == "no permission") {
      response.message = t("http.unPermission");
    }
    if (response.message?.indexOf("no permission for ") == 0) {
      response.message = t("http.noPermission");
    }
    if (!noMsg && response.message) {
      showMessage("error", response.message);
    }
    response.error && console.log(response.error);
    resolve(false);
  }
}

Response Success Flow

1. Check response.success === true
2. If response.message exists, show success message and resolve true
3. If response.data exists, resolve with response.data
4. Otherwise resolve true

Error Response Flow

1. Check response.message for:
   • "session timeout" -> Navigate to /login, show translated message
   • "no permission" -> Translate to t("http.unPermission")
   • "no permission for ..." -> Translate to t("http.noPermission")
2. Show error message if not noMsg
3. Resolve false (not reject)

---

delEmpty Function

Located at plugs/http/axios2.ts lines 50-61:

function delEmpty(data) {
  if (data) {
    for (const item in data) {
      if (data.hasOwnProperty(item)) {
        const val = data[item];
        if ((val == null || val == "null" || val == "") && val !== 0) {
          delete data[item];
        }
      }
    }
  }
}

Note: Identical to axios.ts version.

---

Export Methods

Same signature as Axios:

Method	Signature	Purpose
post	(url, data?, noMsg?, noLoading?)	POST request
get	(url, data?, noMsg?, noLoading?)	GET request
put	(url, data?, noMsg?, noLoading?)	PUT request
delate	(url, data?, noMsg?, noLoading?)	DELETE request
upload	(file, url, data)	File upload
download	(fileName, url, data, callBack?)	Browser download
registerRouter	(routerP)	Set router for redirects

---

Download Behavior

Similar to axios with one difference:

const blob = new Blob([response], {
  type: "application/vnd.ms-excel",  // Axios2: excel type
  // Axios: "application/octet-stream"
});

---

Anti-Patterns

1. delate function name - Should be delete
2. Resolves false for errors - Inconsistent, should reject or have consistent boolean handling
3. Incomplete success check - Only checks response.success, not other success indicators like axios3