(function (window,undefined) {
function ApiClass() {
return new ApiClass.prototype.init();
}
ApiClass.prototype = {
constructor:ApiClass,/*构造函数*/
/***
* 拦截器
*/
interceptor: {
request: null, /* 请求前的拦截 */
response: null /* 请求后的拦截 */
},
/***
* 配置
*/
config : {
baseUrl: '', // 请求的根域名
header: {}, // 默认的请求头
method: 'POST',
async: true, // 是否异步
dataType: 'json', // 设置为json,返回后uni.request会对数据进行一次JSON.parse
responseType: 'text', // 此参数无需处理,默认为text即可
showLoading: true, // 是否显示请求中的loading
loadingText: '请求中',
loadingTime: 800, // 在此时间内,请求还没回来的话,就显示加载中动画,单位ms
timer: null, // 定时器
originalData: false, // 是否在拦截器中返回服务端的原始数据,见文档说明
loadingMask: true, // 展示loading的时候,是否给一个透明的蒙层,防止触摸穿透
Proxy : false /* 是否开启本地正向代理 */
},
/***
* 初始化方法
*/
init : function init() {
// this.setConfig({baseUrl : 'www.baidu.com'});
this.loadCssCode('@keyframes myRotate { from {transform: rotate(0deg);} to {transform: rotate(359deg);} }');
},
/**
* 动态添加css样式
* @param code
*/
loadCssCode : function loadCssCode (code) {
let style = document.createElement('style')
style.type = 'text/css'
style.rel = 'stylesheet'
try {
//Chrome Firefox Opera Safari浏览器
style.appendChild(document.createTextNode(code))
} catch (ex) {
//IE浏览器
style.styleSheet.cssText = code
}
let head = document.getElementsByTagName('head')[0]
head.appendChild(style)
},
/***
* 设置全局默认配置
* @param customConfig
*/
setConfig(customConfig) {
// 深度合并对象,否则会造成对象深层属性丢失
this.config = this.deepMerge(this.config, customConfig);
},
/**
* 判断是否为空
* @param value
* @return {boolean}
*/
empty : function (value) {
switch (typeof value) {
case 'undefined':
return true;
case 'string':
if (value.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0) return true;
break;
case 'boolean':
if (!value) return true;
break;
case 'number':
if (0 === value || isNaN(value)) return true;
break;
case 'object':
if (null === value || value.length === 0) return true;
for (var i in value) {
return false;
}
return true;
}
return false;
},
/**
* 验证URL格式
* @param value
* @return {boolean}
*/
url : function (value) {
return /^((https|http|ftp|rtsp|mms):\/\/)(([0-9a-zA-Z_!~*'().&=+$%-]+: )?[0-9a-zA-Z_!~*'().&=+$%-]+@)?(([0-9]{1,3}.){3}[0-9]{1,3}|([0-9a-zA-Z_!~*'()-]+.)*([0-9a-zA-Z][0-9a-zA-Z-]{0,61})?[0-9a-zA-Z].[a-zA-Z]{2,6})(:[0-9]{1,4})?((\/?)|(\/[0-9a-zA-Z_!~*'().;?:@&=+$,%#-]+)+\/?)$/
.test(value)
},
/***
* JS对象深度合并
* @param target
* @param source
* @return {*[]|*|boolean}
*/
deepMerge : function (target = {}, source = {}) {
target = this.deepClone(target);
if (typeof target !== 'object' || typeof source !== 'object') return false;
for (let prop in source) {
if (!source.hasOwnProperty(prop)) continue;
if (prop in target) {
if (typeof target[prop] !== 'object') {
target[prop] = source[prop];
} else {
if (typeof source[prop] !== 'object') {
target[prop] = source[prop];
} else {
if (target[prop].concat && source[prop].concat) {
target[prop] = target[prop].concat(source[prop]);
} else {
target[prop] = this.deepMerge(target[prop], source[prop]);
}
}
}
} else {
target[prop] = source[prop];
}
}
return target;
},
/***
* 判断arr是否为一个数组,返回一个bool值
* @param arr
* @return boolean
*/
isArray : function (arr) {
return Object.prototype.toString.call(arr) === '[object Array]';
},
/***
* 深度克隆
* @param obj
* @return {*[]|*}
*/
deepClone : function (obj) {
// 对常见的“非”值,直接返回原来值
if([null, undefined, NaN, false].includes(obj)) return obj;
if(typeof obj !== "object" && typeof obj !== 'function') {
// 原始类型直接返回
return obj;
}
let o = this.isArray(obj) ? [] : {};
for(let i in obj) {
if(obj.hasOwnProperty(i)){
o[i] = typeof obj[i] === "object" ? this.deepClone(obj[i]) : obj[i];
}
}
return o;
},
/* 主要请求部分 */
request : async function (options = {}) {
/* 检查请求前拦截 */
if (this.interceptor.request && typeof this.interceptor.request === 'function') {
let interceptorRequest = await this.interceptor.request(options);
if (interceptorRequest === false) {
// 返回一个处于pending状态中的Promise,来取消原promise,避免进入then()回调
return new Promise(()=>{});
}
options = interceptorRequest;
}
options.dataType = options.dataType || this.config.dataType;
options.responseType = options.responseType || this.config.responseType;
options.url = options.url || '';
options.params = options.params || {};
options.header = Object.assign(this.config.header, options.header);
options.method = options.method || this.config.method;
options.Proxy = options.Proxy || this.config.Proxy;
return new Promise((resolve, reject) => {
options.complete = (status, response) => {
// 请求返回后,隐藏loading(如果请求返回快的话,可能会没有loading)
this.loadClose();
// 清除定时器,如果请求回来了,就无需loading
clearTimeout(this.config.timer);
this.config.timer = null;
// 判断用户对拦截返回数据的要求,如果originalData为true,则返回 纯数据
// 返回所有的数据(response)到拦截器,否则返回 原数据
if(this.config.originalData) { // 纯数据
if (this.i
没有合适的资源?快使用搜索试试~ 我知道了~
XMLHttpRequest源生请求接口类
共3个文件
js:2个
md:1个
需积分: 25 0 下载量 20 浏览量
2022-07-21
16:52:29
上传
评论 1
收藏 14KB ZIP 举报
温馨提示
由于之前写源生项目, 采用jQuery的 Ajax 请求后端接口,觉得在代码上不美观,还会出现大肠包小肠的情况。 所以我自己封装了一个请求接口的方法。使用的是 XMLHttpRequest 发送请求。 这个js 类我还添加了请求拦截,以及请求加载中弹框,一个简单实用的工具。 注释多。欢迎有兴趣的同行,浏览使用!
资源详情
资源评论
资源推荐
收起资源包目录
apiClass.zip (3个子文件)
apiClass
使用方法.md 1KB
apiConfig.js 3KB
apiClass.js 23KB
共 3 条
- 1
火熾雲
- 粉丝: 1
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0