// 业务消息提示 var infoTip = function(res, success, fail) { // 需要自己确定外层结构并修改业务处理 if (res.code === '0000') { success && success(res.data); return; } // 需要子级处理用户信息提醒 alert(res.msg); fail && fail(res) } /** * 创建http请求对象 */ function getXhttp() { var xhttp = null; // 检查浏览器是否支持 XMLHttpRequest 对象。如果支持,创建 XMLHttpRequest 对象,如果不支持,则创建 ActiveX 对象: if (window.XMLHttpRequest) { xhttp = new XMLHttpRequest(); } else { //IE6, IE5 xhttp = new ActiveXObject("Microsoft.XMLHTTP"); } return xhttp; } /** * 发起http数据请求 * @param {Object} url * @param {Object} data * @param {Object} method */ function sendHttp(method, url, data, success, fail) { // 判断请求对象是否存在 if (!url) { throw new Error("数据请求地址未填写"); } // 获取浏览器支持数据请求对象 var xhttp = getXhttp(); // 规定请求的类型 true为是否异步 xhttp.open(method === 'FILE' ? 'POST' : method, url, true); // 设置请求后端接受数据类型 method !== 'FILE' && xhttp.setRequestHeader("Content-type", 'application/json') // 监听数据请求结果 xhttp.onreadystatechange = function() { // 服务器级数据发送成功 if (this.status === 200 && this.readyState === 4) { // 定义路基返回数据对象 var res = null; try { // 序列化返回业务数据 res = JSON.parse(this.response); } catch (e) { infoTip({ code: 505, msg: '服务器异常,请联系管理人员!' }, success, fail); throw e; } infoTip(res, success, fail) } // 服务器级未找到业务地址 if (this.status === 404) { infoTip({ code: 404, msg: '服务地址未找到' }, success, fail); throw Error('服务地址未找到'); } // 服务器级异常 if (this.status === 500) { infoTip({ code: 500, msg: '服务地址未找到' }, success, fail); throw Error('后端服务逻辑异常'); } }; // 向服务器发送请求 xhttp.send(data); // 返回xhttp数据请求对象 return xhttp; } var http = { /** * 数据请求get方法 * @param {Object} url 服务地址 * @param {Object} data 请求参数 * @param {Object} success 请求成功 * @param {Object} fail 请求失败 */ get: function(url, data, success, fail) { return sendHttp('GET', url, data, success, fail) }, /** * 数据请求post方法 * @param {Object} url 服务地址 * @param {Object} data 请求参数 * @param {Object} success 请求成功 * @param {Object} fail 请求失败 */ post: function(url, data, success, fail) { return sendHttp('POST', url, data, success, fail) }, /** * 上传文件 * @param {Object} url 服务地址 * @param {Object} data 请求参数 * @param {Object} success 请求成功 * @param {Object} fail 请求失败 */ file: function(url, data, success, fail) { return sendHttp('FILE', url, data, success, fail) } }
原生http数据请求封装
于 2022-02-14 10:51:40 首次发布