ES6 promise版的Ajax封装

语法：

new Promise(function(resolve,reject){...}/*exector*/)

exector是带有resolve和reject两个参数的函数，Promise构造函数执行立即调用exector函数,；
Promise.prototype.then和Promise.prototype.catch方法返回promise对象，所以他们可以被链式调用。

属性

Promise.length，其值总是为1，（构造器参数的数目）
Promise.prototype，表示构造器的原型

方法

Promise.all(iterable)：该方法返回一个新的promise对象，iterable参数对象里面所有的promise对象都成功的时候才会触发成功，iterable是个数组，返回值的顺序和iterable的顺序一致，，如果这个新的promise对象触发了失败状态，它会把iterable里的第一个触发失败的promise对象的错误信息作为它的失败错误信息。promise.all方法常被用于处理多个promise对象的集合。
Promise.race(iterable)：当iterable参数里的任意一个子promise被成功或失败后，父promise马上会用子promise的成功返回值和失败详情作为参数调用父promise绑定的相应handler，并返回该promise对象。
Promise.reject(reason)：返回一个状态为失败的promise对象，并将给定的失败信息传递给相应的处理方法。
Promise.resolve(value)：返回一个状态由给定value决定的promise对象，如果这个值是thenable（即带有then方法的对象），返回的promise对象的最终状态由then方法执行决定；否则（该value为空，基本类型的值或者不带then方法的对象），返回的promise对象状态为fullfilled，并且将该value传递给then方法。如果不知道一个值是否是promise对象，直接使用Promise.resolve(value)来返回一个promise对象，这样value就能以promise对象形式使用。

Promise原型

属性：Promise.prototype.constructor：返回被创建的实例函数，默认是Promise函数
方法：
Promise.prototype.catch(onRejected)：添加一个拒绝（rejection）回调到当前promise，返回一个新的promise。当这个回调函数被调用，新promise将以它的返回值来resolve。如果当前promise进入fullfilled状态，则以当前promise的完成结果作为新的promise的完成结果。
Promise.prototype.then(onFullfilled,onRejected)：添加解决（fullfillment）和拒绝（rejection）回调到当前的promise，返回一个新的promise，以回调的返回值来resolve。
Promise.prototype.finally(onFinally)：添加一个事件处理回调给当前promise对象，并且在当前promise对象解析完毕后，返回一个新的promise对象。回调会在当前promise运行完毕后被调用，无论当前promise的状态是完成（fullfilled）还是失败（renjected）。

根据以上语法，通过`Promise`实现 Ajax 方法。

//Ajax.js
(function(){
    /**
     * ajax请求
     * 此处不考虑不支持xhr对象的情况
     */
    const MyAjax = (options) => {
        return new Promise((resolve,reject) => {
            const type = options.type;
            const url = options.url.indexOf('?') == -1 ? '?' : '&';
            const isAsync = options.isAsync === true ? true : false;
            const xhr = new XMLHttpRequest();
            xhr.onreadystatechange = () => {
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                        const responseData = JSON.parse(xhr.responseText);
                        resolve(responseData);
                    }
                    else{
                        reject(new Error(xhr.status));
                    }
                }
            }
            xhr.open(type,url,isAsync);  //启动请求准备发送
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode; charset=UTF-8');
            xhr.send(urlParams(options.params));
        });                   
    }
    const urlParams = (params) => {
        const result = [];
        for(let prop in params){
            result.push(`prop=${params[prop]}`);
        }
        return result.join('&');
    }
    window.MyAjax = window.MyAjax || MyAjax;
})();

调用方式

  <script src="Ajax.js"></script>
  <script>
      MyAjax({
        type: 'GET',
        url: 'http://localhost:8080',
        isAsync: true,
        params: {
          seen_ids: '',
          count: 5,
          only_unfollowed: true
        }
      })
      .then((data) => {
        console.log(data);
      },(err) => {
        console.log(err);
      })
      .catch((e) => {
        console.log(e);
      })
  </script>

参考：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
http://www.ituring.com.cn/article/66566
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

ES6 promise版的Ajax封装

语法：

属性

方法

Promise原型

根据以上语法，通过Promise实现 Ajax 方法。

参考：

推荐阅读更多精彩内容

根据以上语法，通过`Promise`实现 Ajax 方法。