js es6 封装自己的xmlhttprequest

自己做公共组件的时候，碰到了向服务器请求数据的功能，又不想引入jquery和fetch,所以就自己封装了原生的xmlhttprequest

一.根据域名为接口切换开发环境

export default class Domain {
  NODE_ENV_NAME() {
    let thisDomain = document.domain,//mkl.uat1.rs.com
      node_env_name;
    if (thisDomain === 'wap.mmall.com' || thisDomain === 'hm.mmall.com') {
      node_env_name = 'prd';  //生产环境
    } else if (thisDomain === 'mkl.mklmall.com' || thisDomain === 'hm.mklmall.com') {
      node_env_name = 'stg';  //预发布环境
    } else if (thisDomain === 'mkl.uat1.rs.com' || thisDomain === 'hm.uat1.rs.com') {
      node_env_name = 'uat1';  //测试环境
    }
    else if (thisDomain === 'mkl.dev.rs.com' || thisDomain === 'hm.dev.rs.com') {
      node_env_name = 'dev';  //测试环境
    }
    else {
      node_env_name = 'local';  //开发环境
    }
    return node_env_name;
  };

  NODE_ENV(domain) {
    let http = 'http';
    domain.https = domain.https || false;
    if (domain.https) http = 'https';
    let testDomain = domain.hostname,
      productionDomain = testDomain.replace(".", "-");
    let domainurl,
      NODE_ENV_NAME = this.NODE_ENV_NAME();
    if (NODE_ENV_NAME === 'prd') {
      domainurl = http + '://' + productionDomain + '.mmall.com';
    } else if (NODE_ENV_NAME === 'stg') {
      domainurl = 'http://' + productionDomain + '.mklmall.com';
    } else if (NODE_ENV_NAME === 'uat1') {
      let port = domain.uat1port ? domain.uat1port : '';
      domainurl = 'http://' + testDomain + '.uat1.rs.com:' + port;
    }
    else if (NODE_ENV_NAME === 'dev') {
      let port = domain.testport ? domain.testport : '';
      domainurl = 'http://' + testDomain + '.dev.rs.com:' + port;
    } else {
      let port = domain.testport ? domain.testport : '';
      domainurl = 'http://' + testDomain + '.dev.rs.com:' + port;
    }
    return domainurl;
  };
}

二.包装xmlhttprequest对象

export default class XMLHttpRequestClass {
  fetch(method = 'get', url = '', para, fn) {
    if (method === 'get') {//get
      let xmlhttp = this.getXmlHttp();
      if (xmlhttp != null) {
        url = this.addParaToUrl(method, para, url);
        xmlhttp.open(method, url, true);
        xmlhttp.send(null);
        xmlhttp.onreadystatechange = ()=> {
          this.state_Change(xmlhttp, fn);
        };
      } else {
        alert("Your browser does not support XMLHTTP.");
      }
    } else {//post
      let xmlhttp = this.getXmlHttp();
      if (xmlhttp != null) {
        var paras = this.addParaToUrl(method, para);
        xmlhttp.open(method, url, true);
        xmlhttp.setRequestHeader("Content-Type"
          , "application/x-www-form-urlencoded");
        xmlhttp.send(paras);
        xmlhttp.onreadystatechange = ()=> {
          this.state_Change(xmlhttp, fn);
        };
      } else {
        alert("Your browser does not support XMLHTTP.");
      }
    }

  }

  addParaToUrl(method, para, url = '') {
    let address = '', paras = '';
    address = method === 'get' ? url + '?' : '';
    if (para) {
      Object.keys(para).forEach((key)=> {
        paras += key + '=' + para[key] + '&';
      });
    }
    paras = paras.substr(0, paras.length - 1);
    return address + paras;
  }

  getXmlHttp() {
    let xmlhttp = null;
    if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlhttp;
  }

  state_Change(xmlhttp, fn) {
    if (xmlhttp.readyState == 4) {
      if (xmlhttp.status == 200) {
        fn && fn(xmlhttp.responseText);
      }
      else {
        console.log("请求失败", xmlhttp.statusText);
      }
    }
  }
}

三.使用方式

import XMLHttpRequest from './XMLHttpRequest';
import Domain from './domain';

class OpenInstall {

　　constructor(para){
　　　　this.channel = para.channel;

　　　　let paras = {
　　　　　　chanelId: para.channel,

　　　　　　  width: screen.width,
  　　　　　　height: screen.height,
  　　　　　　type: para.type,
  　　　　　　version: para.version
　　　　};

　　　　this.queryInfo(paras);

　　}
　　

　　queryInfo(para = {}) {
  　　　　var _domainSet = this.domain.NODE_ENV({hostname: "pb"});
  　　　　this.xmlHttpRequest.fetch('post', _domainSet + '/api/h5/code', para, function (data) {
    　　　　console.log('请求结果', data);
  　　　　});
　　}

}

注意:get请求和post请求不能使用同一个xmlhttprequest对象