大佬教程收集整理的这篇文章主要介绍了Angular4+NodeJs+MySQL 入门-04 接口调用类，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
这里其实也挺简单的，这里主要是一些接口定义。然后就是
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() {
}
}
在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; }
对外提供用，外引的要用这个目录里类，直接引用此文件就可以了，不用去再别ApiClient.ts及ClientMiddleware.ts文件。在这里已经封装好了。
import ApiClient from './ApiClient';
import ClientMiddleware from './ClientMiddleware';
export const Client = ClientMiddleware(new ApiClient(null));
下篇文件就是怎么调用接口了，点击一个 btn –>调用api->后台返回数据。
以上是大佬教程为你收集整理的Angular4+NodeJs+MySQL 入门-04 接口调用类全部内容，希望文章能够帮你解决Angular4+NodeJs+MySQL 入门-04 接口调用类所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。