TypeScript在Model中的高级应用

时间  2020-06-09
标签 typescript model 高级 应用 繁體版
原文   原文链接

TypeScript在Model中的高级应用

本文github地址，掘金地址javascript

在MVC、MVVC等前端经典经常使用开发模式中，V、C每每是重头戏，多是前端业务主要集中这两块。结合实际业务，笔者更喜欢路由模式、插件式设计，这种在迭代和维护上更能让开发者收益（不过你须要找PM协调这事，毕竟他们理解的简化用户体验，多半是怎么让用户操做简单）。但咱们今天来看看Model，看看M有什么扩展的可能。前端

若是读者熟悉iOS开发，应该听过VIPER开发模式，下面推荐java

背景

在读到本文以前，你实际项目（如React+Redux）中请求服务器数据，多是以下策略：node

  1. componentDidMount 中发送redux action请求数据；
  2. 在action中发起异步网络请求，固然你已经对网络请求有必定封装；
  3. 在网络请求内部处理必定异常和边际逻辑，而后返回请求到的数据；
  4. 拿到数据this.setState刷新页面，同时可能存一份到全局redux中；

正常状况下，一个接口对应至少一个接口响应Model，万一你还定义了接口请求的Model、一个页面有5个接口呢？ios

若是项目已经引入TypeScript，结合编写Model，你的编写体验确定会如行云流水般一鼓作气！但实际开发中，你还须要对服务器返回的数据、页面间传递的参数等涉及到数据传递的地方，作一些数据额外工做：git

  • 对null、undefined等空值的异常处理（在ES最新方案和TS支持里，新增：链式调用?和运算符??，请读者自行查询使用手册）；
  • 对sex=0、一、2，time=1591509066等文案转义；
  • （还有其余吗？欢迎留言补充）

做为一个优秀且成熟的开发者，你确定也已经作了上述额外的工做，在utils文件下编写了几十甚至上百的tool类函数，甚至还根据函数用途作了分类：时间类、年龄性别类、数字类、......，接着你在须要的地方import，而后你开始进行传参调用。是的，一切看上去都很完美！github

上面这个流程说的就是笔者本人，:)。typescript

现况

随着项目和业务的迭代，加上老板仍是压时间，最坏的状况是你遇到了并无遵照上述"开发规范"的同事，那结果只能是呵呵呵呵呵了。下面直接切入正题吧！数据库

上述流程虽然说有必定设计，但没有作到高内聚、低耦合的原则，我的以为不利于项目后期迭代和局部重构。json

推荐另外一个设计原则：面向对象五大原则SOLID

下面举个例子：

  • 接口里字段发生变动时，如性别从Sex改成Gender；
  • 前端内部重构，发现数据模型不匹配时，页面C支持从页面A附加参数a、或页面B附加参数b跳入，重构后页面B1附加参数b1也要跳转C。从设计来讲确定是让B1尽可能按照之前B去适配时是最好的，不然C会愈来愈重。

上面提过不论是页面交互，仍是业务交互，最根本根本是数据的交换传递，从而去影响页面和业务。 数据就是串联页面和业务的核心，Model就是数据的表现形式。

再好比如今先后端分离的开发模式下，在需求确认后，开发须要作的第一件事是数据库设计和接口设计，简单的说就是字段的约定，而后在进行页面开发，最终进行接口调试和系统调试，一直到交付测试。这期间，后端须要执行接口单元测试、前端须要Mock数据开发页面。

如何解决

接口管理

目前笔记是经过JSON形式来进行接口管理，在项目初始化时，将配置的接口列表借助于 dva 注册到Redux Action中，而后接口调用就直接发送Action便可。 最终到拿到服务器响应的Data。

接口配置（对应下面第二版）：

list: [
  {
    alias: 'getCode',
    apiPath: '/user/v1/getCode',
    auth: false,
  },
  {
    alias: 'userLogin',
    apiPath: '/user/v1/userLogin',
    auth: false,
    nextGeneral: 'saveUserInfo',
  },
  {
    alias: 'loginTokenByJVerify',
    apiPath: '/user/v1/jgLoginApi',
    auth: false,
    nextGeneral: 'saveUserInfo',
  },
]
复制代码

初版：

import { apiComm, apiMy } from 'services';

export default {
  namespace: 'bill',
  state: {},
  reducers: {
    updateState(state, { payload }) {
      return { ...state, ...payload };
    },
  },
  effects: {
    *findBydoctorIdBill({ payload, callback }, { call }) {
      const res = yield call(apiMy.findBydoctorIdBill, payload);
      !apiComm.IsSuccess(res) && callback(res.data);
    },
    *findByDoctorIdDetail({ payload, callback }, { call }) {
      const res = yield call(apiMy.findByDoctorIdDetail, payload);
      !apiComm.IsSuccess(res) && callback(res.data);
    },
    *findStatementDetails({ payload, callback }, { call }) {
      const res = yield call(apiMy.findStatementDetails, payload);
      !apiComm.IsSuccess(res) && callback(res.data);
    },
  },
};
复制代码

第二版使用高阶函数，同时支持服务器地址切换，减小冗余代码：

export const connectModelService = (cfg: any = {}) => {
  const { apiBase = '', list = [] } = cfg;
  const listEffect = {};
  list.forEach(kAlias => {
    const { alias, apiPath, nextGeneral, cbError = false, ...options } = kAlias;
    const effectAlias = function* da({ payload = {}, nextPage, callback }, { call, put }) {
      let apiBaseNew = apiBase;
      // apiBaseNew = urlApi;
      if (global.apiServer) {
        apiBaseNew = global.apiServer.indexOf('xxx.com') !== -1 ? global.apiServer : apiBase;
      } else if (!isDebug) {
        apiBaseNew = urlApi;
      }
      const urlpath =
        apiPath.indexOf('http://') === -1 && apiPath.indexOf('https://') === -1 ? `${apiBaseNew}${apiPath}` : apiPath;
      const res = yield call(hxRequest, urlpath, payload, options);
      const next = nextPage || nextGeneral;
      // console.log('=== hxRequest res', next, res);
      if (next) {
        yield put({
          type: next,
          payload,
          res,
          callback,
        });
      } else if (cbError) {
        callback && callback(res);
      } else {
        hasNoError(res) && callback && callback(res.data);
      }
    };
    listEffect[alias] = effectAlias;
  });
  return listEffect;
};
复制代码

上面看上去还不错，解决了接口地址管理、封装了接口请求，但本身还得处理返回Data里的异常数据。

另外的问题是，接口和对应的请求与响应的数据Model并无对应起来，后面再次看代码须要一点时间才能梳理业务逻辑。

请读者思考一下上面的问题，而后继续往下看。

Model管理

一个接口必然对应惟一一个请求Model和惟一一个响应Model。对，没错！下面利用此机制进一步讨论。

因此经过响应Model去发起接口请求，在函数调用时也能利用请求Model断定入参合不合理，这样就把主角从接口切换到Model了。这里我的以为优先响应Model比较合适，更能直接明白此次请求后拿到的数据格式。

下面先看看经过Model发起请求的代码：

SimpleModel.get(
  { id: '1' },
  { auth: false, onlyData: false },
).then((data: ResponseData<SimpleModel>) =>
  setTimeout(
    () =>
      console.log(
        '设置返回所有数据，返回 ResponseData<T> 或 ResponseData<T[]>',
        typeof data,
        data,
      ),
    2000,
  ),
);
复制代码

其中，SimpleModel是定义的响应Model，第一个参数是请求，第二个参数是请求配置项，接口地址被隐藏在SimpleModel内部了。

import { Record } from 'immutable';

import { ApiOptons } from './Common';
import { ServiceManager } from './Service';

/** * 简单类型 */
const SimpleModelDefault = {
  a: 'test string',
  sex: 0,
};

interface SimpleModelParams {
  id: string;
}

export class SimpleModel extends Record(SimpleModelDefault) {
  static async get(params: SimpleModelParams, options?: ApiOptons) {
    return await ServiceManager.get<SimpleModel>(
      SimpleModel,
      'http://localhost:3000/test',   // 被隐藏的接口地址
      params,
      options,
    );
  }

  static sexMap = {
    0: '保密',
    1: '男',
    2: '女',
  };

  sexText() {
    return SimpleModel.sexMap[this.sex] ?? '保密';
  }
}
复制代码

这里借助了immutable里的Record，目的是将JSON Object反序列化为Class Object，目的是提升Model在项目中相关函数的内聚。更多介绍请看我另一篇文章：JavaScript的强语言之路—另类的JSON序列化与反序列化。

// utils/tool.tsx
export const sexMap = {
  0: '保密',
  1: '男',
  2: '女',
};

export const sexText = (sex: number) => {
  return sexMap[sex] ?? '保密';
};
复制代码

直接在SimpleModel内部用this访问具体数据，比调用utils/tool函数时传入外部参数，更为内聚和方便维护。经过这种思路，相信你能够创造更多"黑魔法"的语法糖！

接着咱们来看看 Common 文件内容：

/** * 接口响应，最外层统一格式 */
export class ResponseData<T = any> {
  code? = 0;
  message? = '操做成功';
  toastId? = -1;
  data?: T;
}

/** * api配置信息 */
export class ApiOptons {
  headers?: any = {}; // 额外请求头
  loading?: boolean = true; // 是否显示loading
  loadingTime?: number = 2; // 显示loading时间
  auth?: boolean = true; // 是否须要受权
  onlyData?: boolean = true; // 只返回data
}

/** * 枚举接口能返回的类型 * - T、T[] 在 ApiOptons.onlyData 为true时是生效 * - ResponseData<T>、ResponseData<T[]> 在 ApiOptons.onlyData 为false时是生效 * - ResponseData 通常在接口内部发生异常时生效 */
export type ResultDataType<T> =
  | T
  | T[]
  | ResponseData<T>
  | ResponseData<T[]>
  | ResponseData;

复制代码

Service文件内部是封装了axios：

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
import { ApiOptons, ResponseData, ResultDataType } from './Common';

/** * 模拟UI loading */
class Toast {
  static loading(txt: string, time: number = 3) {
    console.log(txt, time);
    return 1;
  }
  static info(txt: string, time: number = 3) {
    console.log(txt, time);
    return 1;
  }
  static remove(toastId: number) {
    console.log(toastId);
  }
}

/** * 未知(默认)错误码 */
const codeUnknownTask = -999;

/** * 接口请求封装基类 */
export class InterfaceService {
  /** * todo */
  private static userProfile: { sysToken?: '' } = {};
  public static setUser(_user: any) {
    InterfaceService.userProfile = _user;
  }

  constructor(props: ApiOptons) {
    this.options = props;
  }
  /** * 默认配置 */
  public options = new ApiOptons();

  /** * todo */
  public get sysToken(): string {
    return InterfaceService.userProfile?.sysToken ?? '';
  }

  /** * 构建header */
  public get headers(): Object {
    return {
      Accept: 'application/json',
      'Content-Type': 'application/json; charset=utf-8',
      'app-info-key': 'xxx', // 自定义字段
    };
  }

  /** * 请求前置条件。可根据本身状况重构此函数 */
  preCheck() {
    if (this.options.loading && this.options.loadingTime > 0) {
      return Toast.loading('加载中...', this.options?.loadingTime ?? 3);
    }
    return -1;
  }

  /** * 下载json，返回对象 */
  public static async getJSON(url: string) {
    try {
      const res = await fetch(url);
      return await res.json();
    } catch (e) {
      console.log(e);
      return {};
    }
  }
}

/** * 接口请求封装(axios版，也能够封装其余版本的请求) */
export class InterfaceAxios extends InterfaceService {
  constructor(props: ApiOptons) {
    super(props);
  }

  /** * 封装axios */
  private request = (requestCfg: AxiosRequestConfig): Promise<ResponseData> => {
    return axios(requestCfg)
      .then(this.checkStatus)
      .catch((err: any) => {
        // 后台接口异常，如接口不通、http状态码非200、data非json格式，断定为fatal错误
        console.log(requestCfg, err);
        return {
          code: 408,
          message: '网络异常',
        };
      });
  };

  /** * 检查网络响应状态码 */
  private checkStatus(response: AxiosResponse<ResponseData>) {
    if (response.status >= 200 && response.status < 300) {
      return response.data;
    }
    return {
      code: 408,
      message: '网络数据异常',
    };
  }

  /** * 发送POST请求 */
  public async post(url: string, data?: any) {
    const toastId = this.preCheck();
    const ret = await this.request({
      url,
      headers: this.headers,
      method: 'POST',
      data: Object.assign({ sysToken: this.sysToken }, data),
    });
    ret.toastId = toastId;

    return ret;
  }

  /** * 发送GET请求 */
  public async get(url: string, params?: any) {
    const toastId = this.preCheck();
    const ret = await this.request({
      url,
      headers: this.headers,
      method: 'GET',
      params: Object.assign({ sysToken: this.sysToken }, params),
    });
    ret.toastId = toastId;
    return ret;
  }
}

export class ServiceManager {
  /** * 检查接口数据 */
  public hasNoError(res: ResponseData) {
    if (res.toastId > 0) {
      Toast.remove(res.toastId);
    }
    if (res?.code !== 0 && res.code !== codeUnknownTask) {
      Toast.info(res?.message ?? '服务器出错');
      return false;
    }
    return true;
  }

  /** * 解析响应 */
  public static parse<T>(
    modal: { new (x: any): T },
    response: any,
    options: ApiOptons,
  ): ResultDataType<T> {
    if (!response || !response.data) {
      response.data = new modal({});
    } else {
      if (response.data instanceof Array) {
        response.data = response.data.map((item: T) => new modal(item));
      } else if (response.data instanceof Object) {
        response.data = new modal(response.data);
      }
      return options.onlyData ? response.data : response;
    }
  }

  /** * post接口请求 */
  public static async post<T>(
    modal: { new (x: any): T },
    url: string,
    body?: any,
    options: ApiOptons = new ApiOptons(),
  ): Promise<ResultDataType<T>> {
    // 使用合并，减小外部传入配置
    options = Object.assign(new ApiOptons(), options);

    const request = new InterfaceAxios(options);
    if (options.auth && !request.sysToken) {
      return {
        code: 403,
        message: '未受权',
      };
    }

    try {
      const response = await request.post(url, body);
      return ServiceManager.parse<T>(modal, response, options);
    } catch (err) {
      // 记录错误日志
      console.log(url, body, options, err);
      return {
        code: codeUnknownTask,
        message: '内部错误，请稍后再试',
      };
    }
  }

  /** * get接口请求 */
  public static async get<T>(
    modal: { new (x: any): T },
    url: string,
    params?: any,
    options: ApiOptons = new ApiOptons(),
  ): Promise<ResultDataType<T>> {
    // 使用合并，减小外部传入配置
    options = Object.assign(new ApiOptons(), options);

    const a = new InterfaceAxios(options);
    const request = new InterfaceAxios(options);
    if (options.auth && !request.sysToken) {
      return {
        code: 403,
        message: '未受权',
      };
    }

    try {
      const response = await a.get(url, params);
      return ServiceManager.parse<T>(modal, response, options);
    } catch (err) {
      // 记录错误日志
      console.log(url, params, options, err);
      return {
        code: codeUnknownTask,
        message: '内部错误，请稍后再试',
      };
    }
  }
}
复制代码

Service文件里内容有点长，主要有下面几个类：

  • Toast：模拟请求接口时的loading，可经过接口调用时来配置；
  • InterfaceService：接口请求的基类，内部记录当前用户的Token、多环境服务器地址切换（代码中未实现）、单次请求的接口配置、自定义Header、请求前的逻辑检查、直接请求远端JSON配置文件；
  • InterfaceAxios：继承于InterfaceService，即axios版的接口请求，内部发起实际请求。你能够封装fetch版本的。
  • ServiceManager：提供给Model使用的请求类，传入响应Model和对应服务器地址后，等异步请求拿到数据后再将响应数据Data解析成对应的Model。

下面再贴一下完整的Model发起请求示例：

import { ResponseData, ApiOptons, SimpleModel } from './model';

// 接口配置不一样的三种请求
SimpleModel.get({ id: '1' }).then((data: ResponseData) =>
  setTimeout(
    () =>
      console.log(
        '因需受权致使内部异常，返回 ResponseData：',
        typeof data,
        data,
      ),
    1000,
  ),
);

SimpleModel.get(
  { id: '1' },
  { auth: false, onlyData: false },
).then((data: ResponseData<SimpleModel>) =>
  setTimeout(
    () =>
      console.log(
        '设置返回所有数据，返回 ResponseData<T> 或 ResponseData<T[]>',
        typeof data,
        data,
      ),
    2000,
  ),
);

SimpleModel.get(
  { id: '1' },
  { auth: false, onlyData: true },
).then((data: SimpleModel) =>
  setTimeout(
    () =>
      console.log(
        '仅返回关键数据data，返回 T 或 T[]：',
        typeof data,
        data,
        data.sexText(),
      ),
    3000,
  ),
);

复制代码

控制台打印结果。注意，返回的 data 多是JSON Object，也多是 Immutable-js Record Object。

加载中... 2
加载中... 2
因需受权致使内部异常，返回 ResponseData： object { code: 403, message: '未受权' }
设置返回所有数据，返回 ResponseData<T> 或 ResponseData<T[]> object {
  code: 0,
  message: '1',
  data: SimpleModel {
    __ownerID: undefined,
    _values: List {
      size: 2,
      _origin: 0,
      _capacity: 2,
      _level: 5,
      _root: null,
      _tail: [VNode],
      __ownerID: undefined,
      __hash: undefined,
      __altered: false
    }
  },
  toastId: 1
}
仅返回关键数据data，返回 T 或 T[]： object SimpleModel {
  __ownerID: undefined,
  _values: List {
    size: 2,
    _origin: 0,
    _capacity: 2,
    _level: 5,
    _root: null,
    _tail: VNode { array: [Array], ownerID: OwnerID {} },
    __ownerID: undefined,
    __hash: undefined,
    __altered: false
  }
} 男
复制代码

最后再补充一个常见的复合类型Model示例：

/** * 复杂类型 */

const ComplexChildOneDefault = {
  name: 'lyc',
  sex: 0,
  age: 18,
};

const ComplexChildTwoDefault = {
  count: 10,
  lastId: '20200607',
};

const ComplexChildThirdDefault = {
  count: 10,
  lastId: '20200607',
};

// const ComplexItemDefault = {
// userNo: 'us1212',
// userProfile: ComplexChildOneDefault,
// extraFirst: ComplexChildTwoDefault,
// extraTwo: ComplexChildThirdDefault,
// };

// 复合类型建议使用class，而不是上面的object。由于object里不能添加可选属性?
class ComplexItemDefault {
  userNo = 'us1212';
  userProfile = ComplexChildOneDefault;
  extraFirst? = ComplexChildTwoDefault;
  extraSecond? = ComplexChildThirdDefault;
}

// const ComplexListDefault = {
// list: [],
// pageNo: 1,
// pageSize: 10,
// pageTotal: 0,
// };

// 有数组的复合类型，若是要指定数组元素的Model，就必须用class
class ComplexListDefault {
  list: ComplexItemDefault[] = [];
  pageNo = 1;
  pageSize = 10;
  pageTotal = 0;
}

interface ComplexModelParams {
  id: string;
}

// 由于使用的class，因此须要 new 一个去初始化Record
export class ComplexModel extends Record(new ComplexListDefault()) {
  static async get(params: ComplexModelParams, options?: ApiOptons) {
    return await ServiceManager.get<ComplexModel>(
      ComplexModel,
      'http://localhost:3000/test2',
      params,
      options,
    );
  }
}
复制代码

下面是调用代码：

ComplexModel.get({ id: '2' }).then((data: ResponseData) =>
  setTimeout(
    () =>
      console.log(
        '因需受权致使内部异常，返回 ResponseData：',
        typeof data,
        data,
      ),
    1000,
  ),
);

ComplexModel.get(
  { id: '2' },
  { auth: false, onlyData: false },
).then((data: ResponseData<ComplexModel>) =>
  setTimeout(
    () =>
      console.log(
        '设置返回所有数据，返回 ResponseData<T> 或 ResponseData<T[]>',
        typeof data,
        data.data.toJSON(),
      ),
    2000,
  ),
);

ComplexModel.get(
  { id: '2' },
  { auth: false, onlyData: true },
).then((data: ComplexModel) =>
  setTimeout(
    () =>
      console.log(
        '仅返回关键数据data，返回 T 或 T[]：',
        typeof data,
        data.toJSON(),
      ),
    3000,
  ),
);
复制代码

接着是打印结果。此次Immutable-js Record Object就调用了data.toJSON()转换成原始的JSON Object。

加载中... 2
加载中... 2
因需受权致使内部异常，返回 ResponseData： object { code: 403, message: '未受权' }
设置返回所有数据，返回 ResponseData<T> 或 ResponseData<T[]> object {
  list: [ { userNo: '1', userProfile: [Object] } ],
  pageNo: 1,
  pageSize: 10,
  pageTotal: 0
}
仅返回关键数据data，返回 T 或 T[]： object {
  list: [ { userNo: '1', userProfile: [Object] } ],
  pageNo: 1,
  pageSize: 10,
  pageTotal: 0
}
复制代码

总结

本文的代码地址：github.com/stelalae/no…，欢迎follow me~

如今接口调用是否是很优雅？！只关心请求和影响的数据格式，多使用高内聚低耦合，这对项目持续迭代很是有帮助的。使用TypeScript和Immutable-js来处理数据，在大型应用中愈来愈深刻，从数据管理出发能够优化上层UI显示和业务逻辑。

参考地址：

  1. TypeScript 在复杂 Immutable.js 数据结构下的用法总结
  2. 来玩TypeScript啊，机都给你开好了！
  3. JavaScript的强语言之路—另类的JSON序列化与反序列化
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程