使用promise封装Ajax

一、封装Ajax

<script>
        var ajax = new Promise((resolve, reject) => {
            var xhr = new XMLHttpRequest();
            xhr.open('get', './test1.txt', true);
            xhr.send();
            xhr.onreadystatechange = function() {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    resolve(xhr.responseText);
                }
                setTimeout(function() {
                    reject(new Error('连接超时'));
                }, 2000);
            }
        });

        ajax.then(function(data) {
            console.log(data);
        }).catch(function(err) {
            console.error(err);
        })
    </script>

二、封装get请求

    <script>
        function $get(url, data) {
            if (typeof data === 'object') {
                url += "?time=" + Date.now();
                for (var i in data) {
                    url += "&" + i + "=" + data[i];
                }
            }
            return new Promise((resolve, reject) => {
                var xhr = new XMLHttpRequest();
                xhr.open('get', url, true);
                xhr.send();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        resolve(xhr.responseText);
                    }
                    setTimeout(() => {
                        reject(new Error('连接超时'));
                    }, 2000);
                }
            });
        }

        $get('./test.txt', {
            "username": "zhansgan"
        }).then(function(data) {
            console.log(data);
        }).catch(function(err) {
            console.error(err);
        })
    </script>