美文网首页
用Promise封装一个ajax

用Promise封装一个ajax

作者: 指尖跳动 | 来源:发表于2020-02-27 16:09 被阅读0次
    var url = '/请求的路径';
    var params = {
        id: 'id=123',
        limit: 'limit=10'
    };
    
    // 封装一个get请求的方法
    function getJSON(url) {
        return new Promise(function (resolve, reject) {
            var XHR = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHTTP');
    
            XHR.onreadystatechange = function () {
                //readyState属性表示请求/响应过程的当前活动阶段。
                if (XHR.readyState == 4) {
                    if ((XHR.status >= 200 && XHR.status < 300) || XHR.status == 304) {
                        try {
                            //获取数据
                            var response = JSON.parse(XHR.responseText);
                            resolve(response);
                        } catch (e) {
                            reject(e);
                        }
                    } else {
                        reject(new Error("Request was unsuccessful: " + XHR.statusText));
                    }
                }
            }
            XHR.open('GET', url + '?' + params.join('&'), true);
            XHR.send(null);
        })
    }
    
    getJSON(url).then(resp => console.log(resp));
    

    readyState
    0 - 代表未初始化。 还没有调用 open 方法
    1 - 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用
    2 - 代表已加载完毕。send 已被调用。请求已经开始
    3 - 代表正在与服务器交互中。服务器正在解析响应内容
    4 - 代表完成。响应发送完毕

    readyState的值等于3,就是“流”(streaming),它是提升数据性能的强大工具。


    参考:https://www.jianshu.com/p/76b32c84216a

    相关文章

      网友评论

          本文标题:用Promise封装一个ajax

          本文链接:https://www.haomeiwen.com/subject/wkcxhhtx.html