实现promise封装原生ajax请求

前言

为了加深对promise的使用，在此写一下用promise封装原生ajax请求。

代码实现

function queryData(url) {
    var p = new Promise(function (reject, reslove) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState != 4) return;
            //当请求成功时，用reslove进行回调
            if (xhr.readyState == 4 && xhr.status == 200) {
                reslove(xhr.responseText);
            }
            //请求失败，用reject进行回调
            else {
                reject('服务器错误');
            }
        }
        
    })
    return p;//返回promise对象
}

//请求url，获得请求结果（then前一个函数表示输出reslove结果，后一个表示输出reject结果）
queryData('http://localhost:8080/url1').then(function (data) {
    console.log(data);//返回成功的结果
},function (res) {
    console.log(res);//返回失败的结果
})

在日常开发中，经常会遇到回调地狱。因为同一级下的ajax请求不能保证顺序执行，使用会在ajax请求中再套一个ajax请求…，这就是回调地狱。
解决方法：用promise.then()方法链

queryData('url1').then(function(data) {
    console.log(data)
    return queryData('url2');//返回第二个请求
}).then(function(data) {
    console.log(data);
    return queryData('url3');//返回第三个请求
}).then(function(data) {
    console.log(data);
})