// axios 請求工具
import axios from "axios";
// mitt 微型發(fā)布訂閱工具
import mitt from "mitt";
const createApi = ($controller) => {
  const api = axios.create({
    baseURL: "/api",
    timeout: 10000,
  });
  api.interceptors.request.use(() => {
    // 可以通過 $controller.tmpCache 緩存一些數(shù)據(jù)
  });
  return api;
};
const createBus = () => mitt();
class Controller {
  // 臨時緩存，也可以添加更復雜的緩存
  tmpCache: Record<string, any> = {};
  // 事件總線
  bus = createBus();
  constructor() {
    this.api = createApi(this);
  }
  static instance: Controller | null = null;
  static getInstance() {
    if (!Controller.instance) {
      Controller.instance = new Controller();
    }
    return Controller.instance;
  }
}
export default Controller;

import axios from "redaxios";
const createApi = ($controller) => {
  const api = axios.create({
    baseURL: "/api",
  });
  const getOld = api.get;
  api.get = (...params) => {
    // 如果出發(fā)緩存直接返回
    // if (xxx) {
    //   return $controller.tmpCache
    // }
    return getOld(...params);
  };
  return api;
};

class User {
  readonly $controller: Controller;
  user: User | null = null;
  constructor($controller: Controller) {
    this.$controller = $controller;
  }
  getData(key?: string) {
    return key ? this.user[key] : this.user;
  }
  // 登錄
  login(params) {
    $controller.api.post("/login", params).then((response) => {
      // 處理授權(quán)以及 user 信息
    });
  }
  // 退出
  logout() {
    $controller.api.post("/logout").then(() => {
      // 清理對應數(shù)據(jù)
      $controller.tmpCache = {};
      this.user = null;
    });
  }
  // 設置用戶配置
  setSetting(params) {
    return $controller.api.post("/setting", params).then(() => {
      this.user.setting = params;
    });
  }
}
class Controller {
  constructor() {
    this.api = createApi(this);
    this.user = new User(this);
  }
  logout() {
    this.user.logout();
  }
}

class BasicService {
  constructor($controller) {
    this.api = $controller.api;
    this.bus = $controller.bus;
  }
}
class OrderService extends BasicService {
  static xxxKey = "xxxx";
  constructor($controller) {
    super($controller);
    // 使用全局緩存
    this.cache = $controller.xxxCache;
    // 或者構(gòu)建一個新的 cache 掛載到 controller 上
    this.cache = $controller.getCreatedCache("order", XXXCache);
  }
  getOrders = async () => {
    if (this.cache.has(OrderService.xxxKey)) {
      return this.cache.get(OrderService.xxxKey);
    }
    let orders = await this.api.get("xxxxx");
    // 業(yè)務處理，包括其他的業(yè)務開發(fā)
    order = order.map();
    this.cache.set(OrderService.xxxKey, orders);
    // 可以發(fā)送全局事件
    this.bus.emit("getOrdersSuccess", orders);
    return orders;
  };
  clear() {
    // 如果構(gòu)建一個新的緩存對象，直接 clear 即可 this.cache.clear();
    this.cache.delete(OrderService.xxxKey);
  }
}
class Controller {
  // 臨時緩存，也可以添加更復雜的緩存
  tmpCache: Record<string, any> = {};
  // 事件總線
  bus = createBus();
  services: Record<string, BasicService> = {};
  getService(serviceCls) {
    // 同一個類 name 為相同的名稱
    const { name } = serviceCls;
    if (!this.services[name]) {
      this.services[name] = new serviceCls(Controller.instance);
    }
    return this.services[name];
  }
}

import Controller from "../../controller";
import OrderService from "./order-service";
// A 頁面
const orderService = Controller.getInstance().getService(OrderService);
const priceService = Controller.getInstance().getService(PriceService);
// B 頁面都會使用同一個服務
const orderService = Controller.getInstance().getService(OrderService);