XMLHttpRequest示例解析

示例代码

前言：本代码用JS语言书写，适用于短链接请求(即接口请求)，可直接拿用。之前都是在别人搭建的网络请求下工作，这是第一份自己的网络接口请求封装，写的不好的地方还望谅解和留言指出。websocket长连接后面如果有机会，会更新分享出来。对Promise对象不熟悉的同学，可以移步我的另一篇文章：Promise学习参考(入门级)。

let gameIp = '';//服务器地址
let HttpUtils = cc.Class({
    /*option {
        url,//必传
        data,//必传
        header, //暂时用不到
        method,//必传 
        dataType(json|arraybuffer)}
    */
    _request(option) {
        return new Promise((resolve, reject) => {
            //拼接接口函数IP地址
            option.url = "".concat(gameIp).concat(option.url);
            //创建XMLHttpRequest对象
            let xhr = new XMLHttpRequest();
            //设置网络请求超时时间，如下 设置为3s 当时间已过，请求尚未完成，同步标志未设置时，将分派超时事件
            xhr.timeout = 6000;
            //当readyState状态值(0-4)改变时调用该函数onreadystatechange
            //当创建了XMLHttpRequest对象后，要先设置onreadystatechange的回调函数。
            //在回调函数中，通常我们只需通过readyState === 4判断请求是否完成，如果已完成，再根据status === 200判断是否是一个成功的响应。
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    let response = {data:xhr.response};
                    if(xhr.status === 200){
                        resolve(response);
                    }else{
                        reject(response);
                    }
                }
                // else{
                //     //HTTP请求还在继续...
                // }
            };
            
			xhr.ontimeout = function(e){
                log.err('http post time out:', e);
                let timeout = {message: `${e}`, code: `${ERRORCODE.TIMEOUT}`};
                return reject(timeout);
            };

            xhr.onerror = function(e){
                log.err('http post onerror:', e);
                let error = {message: `${e}`, code: `${ERRORCODE.ONERROR}`};
                return reject(error);
            };
         
            //GET请求方式，把参数拼接到url里面去
            if(option.method == 'GET' && option.data){
                let content = "";
                for(let _key in option.data){
                    let _value = option.data[_key];
                    content += _key + "=" + _value + "&";
                }
                content = content.substring(0, content.length-1);
                option.url += `?${content}`;
            }
            //缓存清理
            option.url += `?${(new Date()).getTime()}`;
            //第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，可以不用写。
            xhr.open(option.method, option.url, true); 
            //设置请求头内容 按需求设置，也可不设。
            xhr.setRequestHeader('Test', '测试');
            //http请求编码格式，除此之外还有三种。其中formdata格式也比较常用，这里不再补充，请另行搜索。
            xhr.setRequestHeader('Content-Type', 'application/json');
            //设置服务器接口响应返回数据类型
            xhr.responseType = 'json';
            if(option.data){
                let content = JSON.stringify(option.data);
                xhr.send(content);
            }else{
                //无参数传输
                xhr.send();
            }
        });
    },

    /** 
    method: 请求方式 GET POST
    url:    接口url
    parms:  参数{}
    suc:    成功回调
    fail:   失败回调
    */
    Request(method, url, params, suc, fail){
        if(Global.sid == '' || Global.sid.length == 0){
            console.log('Global.sid error===>', Global.sid);
            return;
        }
        this._request({
            url:url,
            method: method,
            data:params,
        }).then((resp)=>{
            console.log("http请求成功:", resp);
            let data = resp.data;
            if(data.code == '200'){//code为200表示请求成功
                suc && suc.call(this, data);
            }else{
                fail && fail.call(this, data);
            }
        }).catch((e)=>{
            console.log("http请求失败", e);
        })
    },
});

//单例模式
HttpUtils.getInstance = function () {
    if (HttpUtils.instance == null) {
        HttpUtils.instance = new HttpUtils();
    }
    return HttpUtils.instance;
}

至此，完毕。