Angular4+NodeJs+MySQL 入门-04 接口调用类

上一篇文章说一下，后台接口的创建，这篇说一下如果调用接口。

创建一个目录helpers

• 此目录下有三个文件分别是 ApiClient.ts、clientMiddleware.ts、Core.ts，前面两个文件。
• 是因为在React项目中调用后台接口用，用这个挺方便很好用的，将其引入到Angular4里方便调接口调用。
• 在Vue项目其实也一样可以用，个人觉得这个要比用vue-source用起来方便，具体在Vue中怎么使用，在我的github https://github.com/xiaotuni/vue2-demo有怎么用的。

ApiClient

这里其实也挺简单的，这里主要是一些接口定义。然后就是

import superagent from 'superagent';
import { Utility } from '../Common/Utility';

const methods = ['get', 'post', 'put', 'patch', 'del'];

/**
 * 格式化URL
 * 
 * @param {any} path 
 * @returns 
 */
function formatUrl(path) {
  const __path = path[0] !== '/' ? '/' + path : path;
  const _ApiUrl = 'https://127.0.0.1:10001/webapi' + __path;
  return _ApiUrl;
}

/**
 * 访问接口类
 * 
 * @export
 * @class ApiClient
 */
export default class ApiClient {
  /*
  * 这里定义接口的地方，将所有接口的定义放到一起
  * 方便统计管理，查询也很方便
  */
  API = {
    UserInfo: {
      Info: '/userinfo/user',    // 获取用户接口
      Add: '/userinfo/user',     // 添加用户
      Delete: '/userinfo/user',  // 删除用户
      Put: '/userinfo/user',     // 修改用户
    }
  }

  /**
   * Creates an instance of ApiClient.
   * @param {any} req 
   * @memberof ApiClient
   */
  constructor(req) {
    /**
     * 循环生成五个方法
     */
    methods.forEach((method) => {
      this[method] = (path, condition) => {
        const { params, data } = condition || { params: null, data: null };
        return new Promise((resolve, reject) => {
          const request = superagent[method](formatUrl(path));

          if (params) {
            request.query(params);
          }

          if (req && req.get('cookie')) {
            request.set('cookie', req.get('cookie'));
          }

          if (data) {
            request.send(data);
          }
          request.header.xiaotuni = 'liaohaibing_' + new Date().getTime();

          const { HttpStatus } = Utility.$ConstItem.Events;
          /**
           * 统一的错误处理及提示，这样可以省去写拦截器了，这就相当于拦截器。
           * @param {any} err 错误信息
           * @param {any} body 返回的数据
           * @param {any} __req request
           */
          function __ProcessError(err, body, __req) {
            try {
              Utility.$LoadingHide();
              const { code, msg } = body || { code: 400, msg: '处理错误' };
              if (err.status) {
                if (HttpStatus[err.status]) {
                  if (err.status === 400 && HttpStatus[__req.status]) {
                    Utility.$Emit(HttpStatus[__req.status], { code: code || __req.status, msg: msg || err.message, body });
                  } else {
                    Utility.$Emit(HttpStatus[err.status], { code: code || err.status, msg: msg || err.message, body });
                  }
                } else {
                  Utility.$Emit(HttpStatus[400], { code: err.status, msg: err.message });
                }
              } else if (!!err.crossDomain) {
                Utility.$ActionSheet('与服务器连接中断...');
              } else if (err.message && err.message !== '') {
                Utility.$ActionSheet(err.message);
              }
            } catch (ex) {
              console.log(ex);
            }
          }

          function __SendRequest(_request) {
            _request.end((err, Response) => {
              const { body } = Response || { body: {} };
              if (err) {
                __ProcessError(err, body, Response);
                reject(body);
              } else {
                if (!body) {
                  Utility.$Emit(HttpStatus[Response.status], { status: Response.status, msg: '处理成功', Response });
                }
                resolve(body);
              }
            });
          }

          try {
            __SendRequest(request);
          } catch (ex) {
            console.log(ex);
          }
        });
      }
    });
  }
  empty() {
  }
}

ClientMiddleware.ts文件

在React Redux当中有必须将返回的数据通过types把数据存放到store里；
在Vue里有一个Vuex的，也是通过这个文件将数据存放到store里去的；
而在Angular里返回的数据，我是喜欢把他放到自己的Service里的。个人认为，也可能我表达的不是很清楚，理伦学的不够扎实呀。
这个里的东西很少，代码其实还可以现简练点的。

export default function ClientMiddleware(client) {

  /**
   * 批处理操作
   * 
   * @param {any} args 
   * @returns 
   */
  const __BatchCallAPI = (args) => {
    const { commit, actions } = args;
    const { loading, fail, complete, list } = actions;
    const __APIList = [];
    list.forEach((item) => {
      const { promise } = item;
      __APIList.push(promise(client));
    });
    return Promise.all(__APIList).then((results) => results, (err) => err).catch((error) => error);
  };

  /**
   * 方法调用
   * 
   * @param {any} args 
   * @returns 
   */
  const __CallMethod = (args) => {
    const { dispatch, commit, state, action, actions } = args;
    // 判断是否是批量调用接口
    if (actions) {
      return __BatchCallAPI(args);
    }
    if (typeof action === 'function') {
      return action(dispatch, state);
    }
    const { promise, type, ...rest } = action;

    return promise(client).then((result) => result, (error) => error).catch((error) => error);
  };
  return __CallMethod;
}

Core.ts 文件

对外提供用，外引的要用这个目录里类，直接引用此文件就可以了，不用去再别ApiClient.ts及ClientMiddleware.ts文件。在这里已经封装好了。

import ApiClient from './ApiClient';
import ClientMiddleware from './ClientMiddleware';
export const Client = ClientMiddleware(new ApiClient(null));

下篇文件就是怎么调用接口了，点击一个 btn –>调用api->后台返回数据。