原生ajax基于promise的封装

最新推荐文章于 2021-09-26 19:56:27 发布

jiu999dian

最新推荐文章于 2021-09-26 19:56:27 发布

阅读量220

点赞数

文章标签： ajax json js post

本文链接：https://blog.csdn.net/jiu999dian/article/details/115723856

版权

原生Ajax封装

//原生ajax基于Promise的对象封装
var ajax = {
    xml: function() {
        if (window.ActiveXObject) {
            var xml = new ActiveXObject("Microsoft.XMLHTTP"); //判断浏览器类型ie浏览器或者Netscape浏览器
        } else if (window.XMLHttpRequest) {
            var xml = new XMLHttpRequest();
        }
        return xml
    },
    get: function(url, data) {
        return new Promise((resolve, reject) => {
            console.log(this)
            let xml = this.xml();
            xml.onreadystatechange = getstate; //注册回调函数getstate监听状态码的变化
            function getstate() {
                switch (xml.readyState) {
                    case 4:
                        if (xml.status == 200) {
                            var data = JSON.parse(xml.responseText);
                            resolve(data);
                        } else {
                            reject(new Error("请求不成功: " + xml.statusText));
                        }
                        break;
                }

            }
            if (typeof data === 'object') {
                //如果是个obj对象，转化成urlencoded格式
                let str = ``;
                for (let key in data) {
                    if (data.hasOwnProperty(key)) {
                        str += `${key}=${data[key]}&`;
                    }
                }
                str.length > 0 ? str = str.substring(0, str.length - 1) : null;
                data = str;
            }
            xml.open('get', `${url}?${data}`, true); //创建http请求
            // xml.setRequestHeader('Content-Type', 'application/json;charset=utf-8'); //设置请求头
            // xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xml.send(null); //向服务器发送请求
        })
    },
    post: function(url, data) { //post请求中data是个对象
        return new Promise((res, rej) => {
            let xml = this.xml();
            xml.onreadystatechange = getstate;

            function getstate() {
                switch (xml.readyState) {
                    case 4:
                        if (xml.status == 200) {
                            try {
                                // let data1 = JSON.parse(xml.responseText);
                                // res(data1, xml.responseText);
                                res(xml.responseText)
                            } catch (e) {
                                rej(e)
                            }
                        } else {
                            rej(new Error("请求不成功: " + xml.statusText));
                        }
                        break;
                    default:
                        break;
                }
            }
            xml.open('post', url, true);
            // xml.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xml.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
            // xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xml.send(JSON.stringify(data)); //向服务器发送data数据格式json格式
        })

    }

}

// export default ajax;