ajax封装

Posted 2020-08-06

周日在家封装了ajax简单的函数。

1、封装extand方法

　　模仿（抄袭）jQuery源码的$.extend方法，可以在使用ajax时候少传一些参数。

　　

Function.prototype.method = function(name, func) {
    this.prototype[name] = func;
    return this;
};

var $ = function() {
    
}
.method(‘extend‘, function() {
    var options, name, copy,
        target = {},
        i = 1,
        length = arguments.length;

    for ( ; i < length; i++ ) {
        options = arguments[i];
        for ( name in options ) {
            copy = options[name];
            target[name] = copy;
        };
    }
    return target;
})

2、有了extend方法之后，就是ajax方法了

　

.........
 .method(‘ajax‘, function(opts) {
    var xhr = new XMLHttpRequest(),
    self = this,
    ajaxSettings = {
        url: location.href,
        type: "GET",
        async: true,
        contentType: "application/x-www-form-urlencoded",
        data: null
    },
    ajaxOpts = this.extend({}, ajaxSettings, opts),
    success = ajaxOpts.success;
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4 && xhr.status === 200) {
            var res = JSON.parse(xhr.responseText);
            if(res.success) {
                data = res.data || {};
                success && success.call(self, data);
            }
        }
    };
    xhr.open(ajaxOpts.type, ajaxOpts.url, !!ajaxOpts.async);
    xhr.setRequestHeader("Content-type", ajaxOpts.contentType);
    xhr.send(JSON.stringify(ajaxOpts.data));
    return this;
})

这样的话，ajax方法就已经封装好了。

 

但是有一些问题，现在angular,jQuery 都支持$ajax().success 或者 $ajax().done的连缀写法，我至今还没想好怎么实现，难道是用ES6的promise函数吗??>