ES6 promise版的Ajax封装

语法:

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

exector是带有resolvereject两个参数的函数,Promise构造函数执行立即调用exector函数,;
Promise.prototype.thenPromise.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;
})();

调用方式

  
  
参考:

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封装)