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->後臺返回數據。