使用Promise封装Ajax请求，实现前后端交互

1、Ajax技术

专于前端网页与后台服务器进行“交互”的技术，特点在于不需要加载整个网页的情况下，实现页面局部数据的刷新。

AJax技术在底层使用异步对象XMLHttpRequest，代替浏览器发起请求。

其原本实现可分为如下四步：

// 1、创建异步对象
let xmlHttp = new XMLHttpRequest();

// 2、绑定事件
/**
 * readyState值的含义
 * 0: 请求未初始化
 * 1: 服务器连接已建立
 * 2: 请求已接收 接收到了响应头
 * 3: 请求处理中 正在下载响应体
 * 4: 请求已完成，且响应已就绪
 */
xmlHttp.onreadystatechange = function () {
    // 处理服务器返回数据
    alert(xmlHttp.readyState)
}

// 3、设置初始请求
// type：代表请求方式 get/post
// 最后一个参数：
// true: 本次处理为异步处理请求
// false: 本次处理为同步处理请求
xmlHttp.open("type", "url", true);

// 4、发起请求
xmlHttp.send();

2、使用Promise封装Ajax请求

使用promise实际上也是基于以上四个步骤，参考别人我自己改了改：

/**
 * @param {Object} obj 
 * {
 *    url: "" 请求地址,
 *    methods: "get/post" 请求方法,
 *    data: {} 请求参数
 * }
 * @returns {JSON} 
 */

var promise_ajax = function (obj) {
    //返回promise对象
    return new Promise((res, rej) => {
        let xhr = null
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest()
        } else {
            //兼容ie5、ie6
            xhr = new ActiveXObject('Microsoft.XMLHTTP')
        }

        // 监听请求状态变化
        xhr.onreadystatechange = function () {
            try {

                if (xhr.readyState == 4 && xhr.status == 200) {
                    if (xhr.responseXML) {
                        res(xhr.responseXML)
                    } else {
                        res(JSON.parse(xhr.responseText))
                    }
                } else {
                    if (xhr.status == 404) throw '404,未找到页面'
                }
            } catch (e) {
                rej(e)
            }
        }

        if (obj.methods != undefined && obj.methods != '') {
            var method = String(obj.methods).toUpperCase;
            if (method == 'GET') {
                let data = '?'
                for (let key in obj.data) {
                    data += key + '=' + obj.data[key] + '&'
                }
                data.substring(data.length - 1)
                obj.data = data
            }
        } else {
            throw new Error("请求方式不能为空！")
        }

        xhr.open(obj.methods, obj.url, true) //发起请求

        //发送请求
        method == 'GET' ? xhr.send() : xhr.send(obj.data);
    })
}