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,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,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->后台返回数据。