基於XMLHttpRequest簡單封裝網絡請求

沒有時間加以說明，而且代碼也還很粗糙，暫時先直接上代碼，記錄着，週末有空再升級代碼並說明。

代碼

let leAxios = {}
leAxios.httpRequest = function (paramObj, sucFun, errFun, complete) {
    var xmlhttp = null;
    /*
     * 關於XMLHttpRequest https://www.w3school.com.cn/xml/xml_http.asp 
     * 創建XMLHttpRequest對象，所有現代瀏覽器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都內建了 XMLHttpRequest 對象。
     * 老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 對象：new ActiveXObject("Microsoft.XMLHTTP")
     * */
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {//大可不必適配
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    /*判斷是否支持請求*/
    if (xmlhttp == null) {
        alert('你的瀏覽器不支持XMLHttp');
        return;
    }
    /*請求方式，並且轉換爲大寫*/
    var httpType = (paramObj.type || 'GET').toUpperCase();
    /*數據類型*/
    var dataType = paramObj.dataType || 'json';
    /*請求接口*/
    var httpUrl = paramObj.httpUrl || '';
    /*是否異步請求，默認異步*/
    var async = paramObj.async || true;

    /*請求接收*/
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {
                console.log(xmlhttp)
                /*成功回調函數*/
                sucFun({
                    code: xmlhttp.status,
                    mes: 'Ok',
                    data: xmlhttp.responseText,
                });
            } else {
                errFun;
            }
            if (complete) {
                complete
            }
        } else {
            /*暫不處理*/
        }
    }

    /*接口連接，先判斷連接類型是post還是get*/
    if (httpType == 'GET') {
        let paramData = paramObj.data || [];
        let requestData = '';
        for (var name in paramData) {
            requestData += name + '=' + paramData[name] + '&';
        }
        requestData = requestData == '' ? '' : requestData.substring(0, requestData.length - 1);

        console.log(requestData)
        if (requestData != '') {
            httpUrl = httpUrl + '?' + requestData
        }
        xmlhttp.open("GET", httpUrl, async);
        xmlhttp.send(null);
    } else if (httpType == 'POST') {
        xmlhttp.open("POST", httpUrl, async);
        //發送合適的請求頭信息
        if (dataType == 'json') {
            // application/json;charset=UTF-8
            xmlhttp.setRequestHeader("Content-type", "application/json;charset=UTF-8");
        } else {
            // application/x-www-form-urlencoded
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        }
        xmlhttp.send(JSON.stringify(paramObj.data));
    }
}
export default leAxios

使用

<script>
import leAxios from './leAxois'

expot defult {
  methods: {
    test() {
      let paramObj = {
        httpUrl: 'http://114.115.xxx.xxx:8080/invoice/user/login',
        type: 'post',
        data: {
          account: '177087788xx',
          password: '111111', 
        }
      }
      /*請求調用*/
      leAxios.httpRequest(paramObj, function (respondDada) {
        //這裏編寫成功的回調函數
        console.log(respondDada)
      }, function () {
        alert('網絡錯誤')
      });
    },
  }
}
</script>