ajax 简单以 Promise 方式实现

var Ajax = (function (e) {
    /**
     * 发送http请求
     * @param {String} mode 请求模式
     * @param {String} url 请求地址
     * @param {String} body 请求体
     */
    function http(mode, url, body = null) {
        return new Promise((resolve, reject) => {
            let http = xmlHttp();
            if (http != null) {
                http.onreadystatechange = function () {
                    if (http.readyState == 4) {
                        if (http.status == 200) {
                            const res = JSON.parse(http.response);
                            resolve(res);
                        } else {
                            reject();
                            console.error("Problem retrieving XML data");
                        }
                    }
                }
                http.open(mode, url, true);
                http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                http.setRequestHeader("Accept", "application/json, text/plain, */*");
                http.send(body);
            } else {
                // 浏览器不支持xmlHttp
                reject();
                console.error("Your browser does not support xmlHttp.");
            }
        })

        function xmlHttp() {
            let http = null;
            // 新浏览器
            if (window.XMLHttpRequest)  http = new XMLHttpRequest();
            // IE5、IE6
            else if (window.ActiveXObject) http = new ActiveXObject("Microsoft.XMLHTTP");
            return http
        }
    }

    /**
     * json类型检查
     * @param {*} param 参数
     * @return Boolean
     */
    function jsonCheck(param) {
        // 接受类型
        if (param && param instanceof Object && !(param instanceof Array)) return true
        // 不接受类型
        console.error("only allow a param of json")
        return false
    }

    /**
     * get请求
     * @param {String} url 请求地址
     * @param {JSON} param 请求参数
     */
    function get(url, param) {
        if (jsonCheck(param)) {
            let p = [];
            for (let key in param) param[key] && p.push(`${key}=${param[key]}`);
            url = p.length ? url + '?' + p.join('&') : url;
        }
        return http('GET', url)
    }

    /**
     * post请求
     * @param {String} url 请求地址
     * @param {JSON} body 请求体
     */
    function post(url, body) {
        let data = null;
        if (jsonCheck(body)) {
            let p = [];
            for (let key in body) body[key] && p.push(`${key}=${body[key]}`);
            data = p.length ? p.join('&') : null
        }
        return http('POST', url, data)
    }

    /**
     * jsonp请求
     * @param {String} url 请求地址
     * @param {JSON} param 请求参数
     * @param {String} callback 回调处理方法名
     */
    function jsonp(url, param, callback = "callback") {
        return new Promise((resolve, reject) => {
            try {
                const script = document.createElement("script");
                const jsonpCallback = "jsonpCallback" + parseInt(Math.random() * 10000000000);
                param[callback] = jsonpCallback;
                // Jsonp返回数据处理
                window[jsonpCallback] = function (data) {
                    resolve(data);
                    // 从BOM树上删除
                    let scriptList = document.getElementsByTagName("script");
                    for (index in scriptList) {
                        let src = scriptList[index].attributes ? scriptList[index].attributes.src : null;
                        src && decodeURI(script.src) == src.value && scriptList[index].remove();
                        delete window[jsonpCallback];
                    }
                }
                // url处理
                if (jsonCheck(param)) {
                    let p = [];
                    for (key in param) param[key] && p.push(`${key}=${param[key]}`);
                    script.src = url + '?' + (p.length ? p.join('&') : null);
                }
                // 添加到BOM树上拉取数据
                document.getElementsByTagName("body")[0].appendChild(script);
            } catch (err) {
                reject()
                console.error(err);
            }
        })
    }

    /**
     * 返回调用方法
     */
    return { get, post, jsonp }
})(window)
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值