smart-screen-demo-web/src/services/framework/http-service.ts

import axios from "axios";
import { AxiosRequestConfig, AxiosResponse } from "axios";
import qs from "qs";
import { obj } from "@/types";
import { $commonService } from "@/services/framework/dependency-injection-service";
import router from "@/router";
declare let __APP_ENV__: any;
const CancelToken = axios.CancelToken;

export const HttpService = {
  install(app: any) {
    app.config.globalProperties.$http = new HttpServiceClass(app, {});
    $commonService.$dependencyInjectionService.provideFun(
      "$http",
      app.config.globalProperties.$http
    );
  },
};

// todo 提交的数据 前后去空格
class HttpServiceClass {
  VueApp;
  StorageService;

  axiosConfig = {
    // baseUrl: process.env.APP_API_BASEURL, // 请求的根域名
    header: {}, // 默认的请求头
    timeout: window.AppConfig.HTTP_TIMEOUT, // 超时时间 3000
    withCredentials: false, //跨域携带cookie
    crossorigin: true,
    /*    validateStatus() {
      // 使用async-await，处理reject情况较为繁琐，所以全部返回resolve，在业务代码中处理异常
      return true;
    },*/

    // 在向服务器发送请求前，序列化请求数据
    // transformRequest: [
    //   function (data: any) {
    //     console.log("transformRequest data", data);
    //     return data;
    //   },
    // ],

    // 在传递给 then/catch 前，修改响应数据
    // transformResponse: [
    //   function (data: any) {
    //     console.log("transformResponse data", data);
    //     return data;
    //   },
    // ],
  };

  service: any;
  /////////////////////////////////////////////////////////////////////////////////////
  // get请求
  get = (url: string, data = {}, header = {}) => {
    const postData =
      JSON.stringify(data) === "{}" ? "" : "?" + qs.stringify(data);
    return this.service({
      method: "get",
      url: this.urlHandler(url) + postData,
      header,
    });
  };

  // post请求
  post = (url: string, data = {}, header = {}) => {
    return this.service({
      url: this.urlHandler(url),
      method: "post",
      data,
      header,
    });
  };

  // put请求
  put = (url: string, data = {}, header = {}) => {
    return this.service({
      url: this.urlHandler(url),
      method: "put",
      header,
      data,
    });
  };

  // delete请求
  delete = (url: string, data = {}, header = {}) => {
    return this.service({
      url: this.urlHandler(url),
      method: "delete",
      header,
      data,
    });
  };

  // jsonp 支持
  jsonp = (url: string, data: any) => {
    const JSONP = document.createElement("script");
    JSONP.setAttribute("type", "text/javascript");

    const headEle = document.getElementsByTagName("head")[0];

    let ret = "";
    if (data) {
      if (typeof data === "string") {
        ret = "&" + data;
      } else if (typeof data === "object") {
        for (const key in data) {
          ret += "&" + key + "=" + encodeURIComponent(data[key]);
        }
      }
      ret += "&_time=" + Date.now();
    }
    JSONP.src = `${url}&callback=jsonp_callback`;

    return new Promise((resolve, reject) => {
      window.jsonp_callback = (r: any) => {
        resolve(r);
        headEle.removeChild(JSONP);
        delete window.jsonp_callback;
      };
      setTimeout(() => {
        headEle.appendChild(JSONP);
      });
    });
  };

  constructor(VueApp: any, config: AxiosRequestConfig) {
    this.init(config);
    // debugger
    this.VueApp = VueApp;

    this.StorageService = this.VueApp.config.globalProperties.$storageService;
  }

  ///////////////////////////////////////////////////
  init(config: AxiosRequestConfig) {
    this.service = axios.create(
      Object.assign({}, this.axiosConfig, config || {})
    );

    this.requestInterceptor(this.service);
    this.responseInterceptor(this.service);
  }

  // 请求拦截
  requestInterceptor(instance: any) {
    instance.interceptors.request.use(
      (config: AxiosRequestConfig) => {
        // request 触发前拼接 url
        // option.url = this.config.baseUrl + option.url;

        // header 处理
        config.headers = Object.assign({}, config.headers, this.getHeaders());

        // removePending(config);
        // addPending(config);
        return config;
      },
      (error: any) => {
        return Promise.reject(error);
      }
    );
  }

  // 响应拦截
  responseInterceptor(instance: any) {
    instance.interceptors.response.use(
      (response: AxiosResponse) => {
        // removePending(response.config);
        return response.data;
      },
      (error: any) => {
        // error.config && removePending(error.config);
        const response = error.response;

        let message = "";
        switch (response.status) {
          case 200:
            break;
          case 400:
            message = "请求错误(400)";
            break;
          case 401:
            message = "未授权，请重新登录(401)";
            $commonService.$xToast({ htmlStr: message });
            router.push("/login");
            break;
          case 403:
            message = "拒绝访问(403)";
            break;
          case 404:
            message = "请求出错(404)";
            break;
          case 408:
            message = "请求超时(408)";
            break;
          case 500:
            message = "服务器错误(500)";
            break;
          case 501:
            message = "服务未实现(501)";
            break;
          case 502:
            message = "网络错误(502)";
            break;
          case 503:
            message = "服务不可用(503)";
            break;
          case 504:
            message = "网络超时(504)";
            break;
          case 505:
            message = "HTTP版本不受支持(505)";
            break;
          default:
            message = `连接出错(${response.status})!`;
        }

        if (response.status !== 200) {
          console.error(message, response);
        }

        return Promise.reject(error);
      }
    );
  }

  ////////////////////////////////////////////////////
  urlTransform(url: string, params: obj = {}): string {
    for (const keyName in params) {
      url = url.replace(":" + keyName, params[keyName]);
    }

    return url;
  }

  urlHandler(url: string) {
    if (url.indexOf("http://") > -1 || url.indexOf("https://") > -1) {
      // 不处理url
      return url;
    }
    const APP_API_BASEURL = __APP_ENV__.VITE_HTTP_SERVER;
    console.log(APP_API_BASEURL + url);
    return APP_API_BASEURL + url;
  }

  /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  /**
   * http 请求header
   * todo 待修改
   * @returns {HttpHeaders}
   */
  getHeaders(): any {
    // todo 改成从服务取
    const token = this.StorageService.getData("AuthToken");
    // 获取当前环境
    const viteEnv = __APP_ENV__;
    const version = viteEnv.VITE_IS_DEBUG
      ? "1.2.37.220921103805_alpha"
      : "2.3.1.230103175958_release"; // todo 临时写死 后期改
    // 1.2.37.220921103805_alpha 2.3.1.230103175958_release
    const os = "Android"; // todo 临时写死 后期改
    const headers = {
      "Content-Type": "application/json",
      "X-His-AppId": "com.hisensehitachi.himit2", // 包名
      "X-His-AppTag": "V2",
      "X-His-APIKey": "1QiLCJhbGciOiJIUzI1NiF8", // 由服务器指定固定值
      "X-His-Version": version, //  App版本号 1.0.11.180720_alpha
      "X-His-OS": os,
      "X-His-Timestamp": new Date().getTime().toString(), // 请求发起时间，采用UTC时间(整数类型),取绝对值，转为String
      "X-His-Locale": "zh_CN", // 请求返回语言类型，zh_CN返回中文，en_US返回英文。
      Authorization: token === "" ? "Bearer" : "Bearer " + token,
    };

    return headers;
  }
}