基於Promise處理Ajax請求

1、處理原生Ajax

    <script>
        function queryData(url) {
            var p = new Promise(function(resolve, reject) {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState != 4) {
                        return;
                    }
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        resolve(xhr.responseText);
                    } else {
                        reject('服務器錯誤');
                    }
                };
                xhr.open('get', url);
                xhr.send();
            });
            return p;
        }
        queryData('http://localhost:3000/data')
            .then(function(data) {
                console.log(data);
                return queryData('http://localhost:3000/data1');
            })
            .then(function(data) {
                console.log(data);
                return queryData('http://localhost:3000/data2');
            })
            .then(function(data) {
                console.log(data);
            })
    </script>

　　2、then參數中的函數返回值

　　（1）返回Promise實例對象：該返回實例會調用下一個then

    queryData('http://localhost:3000/data')
            .then(function(data) {
                return queryData('http://localhost:3000/data1');
            })
            .then(function(data) {
                return new Promise(function(resolve, reject) {
                    resolve('我是Promise實例');
                })
            })
            .then(function(data) {
                console.log(data); // 我是Promise對象
            })        

　　

　　（2）返回普通值：返回的普通值會傳遞給下一個then，通過then參數中函數的參數接受該值

    queryData('http://localhost:3000/data')
            .then(function(data) {
                return queryData('http://localhost:3000/data1');
            })
            .then(function(data) {
                return '我是普通值';              // 會內部生成一個Promise對象
            })
            .then(function(data) {
                console.log(data); // 我是普通值 
            })