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