原生http数据请求封装

// 业务消息提示
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)
   }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值