封装ajax和Promise

封装ajax和Promise

一、ajax

ajax 全称为“Asynchronous JavaScript And XML”（异步JavaScript和XML） 是指一种创建交互式网页应用的开发技术、改善用户体验，实现无刷新效果。

优点：
a、不需要插件支持
b、页面无刷新，使用异步方式与服务器通信，具有更加迅速的响应能力，优秀的用户体验
c、提高Web程序的性能
d、可以把以前一些服务器负担的工作转到客户端，利用客户端闲置的能力来处理，减轻服务器的负担，由于ajax的原则是“按需取数据”，所以就可以最大程度的减少冗余请求，提高性能。

缺点：
a、破坏浏览器“前进”、“后退”按钮的正常功能，可以通过简单的插件弥补 。
b、对搜索引擎的支持不足。
c、安全问题：ajax暴露了与服务器交互的细节。

二、Promise

Pomise是es6中的一个异步处理对象，从它可以获取异步操作的消息，特点：

1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending(进行中)、fulfilled(已成功)和rejected(已失败）。

2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。

三、ajax和Promise封装

    // (原生js)封装Promise对象和ajax过程
    var jsGetAjaxPromise = function(param){
        return new Promise(function(resolve, reject ){
            var xhr = new XMLHttpRequest();
            xhr.open('get', param.url, true);
            xhr.onload = resolve;
            xhr.onerror = reject;
            xhr.send();
        })
    }

    // 调用示例
    var p1 = jsGetAjaxPromise({  // 启动第一个任务
        url: 'cross-domain1.txt' // 要获取的文件地址
    });
    p1.then(function(response){  // 处理第一个异步任务的结果(每次调用then都会返回一个新创建的Promise对象)
        console.log(response);
        return jsGetAjaxPromise({ // 启动第二个任务 
            url: 'cross-domain2.txt'
        })
    }).then(function(response2){  // 处理第二个任务的结果
        console.log(response2);
        return jsGetAjaxPromise({ // 启动第三个任务  
            url: 'cross-domain3.txt'
        })
    }).then(function(response3){  // 处理第二个任务的结果
        console.log(response3);
    }).catch(function(err){
        console.log(err);
    });

改写成jquery实现

    // (jquery)封装Promise对象和ajax过程
    var jqGetAjaxPromise = function(param){
        return new Promise(function(resolve, reject){
            $.ajax({
                url: param.url,
                type: 'get',
                data: param.data || '',
                success: function(data){
                    resolve(data);
                },
                error: function(error){
                    reject(error)
                }
            });
        });
    };
    // 调用示例
    var p2 = jqGetAjaxPromise({    
        url: 'cross-domain1.txt'
    });
    p2.then(function(data){      
        console.log(data);
        return jqGetAjaxPromise({  
            url:'cross-domain2.txt'
        });
    }).then(function(data2){   
        console.log(data2);
    }).catch(function(err){
        console.log(err);
    });

PS： 由于涉及ajax，所以本文中所有的代码都在wamp服务器上运行的， cross-domain.txt文件是自定义的文件。