全栈开发五(编写vue ajax插件)

作者: itvwork | 来源:发表于2017-09-29 10:51 被阅读98次

    今天我们来写一个 vue的ajax插件。很多人会用axios,或者jquery,其实想想也没有必要,我们完全可以自己写一个这样插件,这样我对我们学习javascript还是很有帮助的。

    一、兼容性问题

    提到ajax我们可能会知道xhr 和xhr2,目前很多新的浏览器都支持了xhr2,但如果你想要兼容 ie9那麻烦,因为ie9不支持 xhr2;
    xhr只支持字符串的传输,不支持二进制流文件,而且xhr2支持二进制流的上传,还有增加了丰富的api接口。
    对于 xhr大家都很熟悉了,如果不懂可以点击xhr查看
    那么xhr2增加了那些接口,我们来介绍一下

    XHR2

    XMLHttpRequest 简称 XHR
    XMLHttpRequest level2 简称XHR2
    XHR2在 XHR的基础上新增了很多接口
    新增FormData对象 XMLHttpRequestUpload对象

    属性

    readyState 请求响应状态
    status HTTP状态 404/200/503/403/304
    responseText 响应内容
    timeout 超时时间 xhr2
    方法
    abort()
    open()
    send()
    XHR2没有新增方法
    事件

    readystatechagne
    load 请求成功完成时触发 XHR2
    progress 进度事件 下载重复触发大约50ms触发一次 XHR2
    error 请求失败时触发 XHR2
    loadstart 请求开始时触发 XHR2
    loadend 请求结束时触发 无论成功都会触发 XHR2
    abort 请求中断时触发 XHR2
    timeout 请求超时时触发 XHR2

    二、格式化数据

    首先我们来看下看我们提交的数据结构

      {
           name:'useadmin',
           pwd:'123456',
           contents:[1,2,3,4],
           id:{
                 id:10,
                  user:name
             }
        }
    
    

    我们要怎样格式化这个json数据呢?如果是xhr1,我需要把数据格式化为

    name:useadmin
    pwd:123456
    contents[0]:1
    contents[1]:2
    contents[2]:3
    contents[3]:4
    id[id]:10
    id[user]:
    admin_name:admin
    admin_password:admin
    
    //要把这个数组变一个字符串才能发送
    name=useadmin&pwd=123456&contents[0]=1&contents[1]=2&contents[2]=3&contents[3]=4&id[id]=10&id[user]=&admin_name=admin&admin_password=admin就这样在把它串起来,其实就是跟url的参数一样
    

    那么怎样我们才能把这个字符串变成一这样一个字符串呢?看下面代码

     function argUrl(obj) {  //将数据传进来
                    var result=[];  //将处理的数据以组件传过来
                    function argFormat(obj,name) {
                        if(typeof obj==="object"){ //判断是不是object,如个是遍历
                            for(let i in obj){
                                if(typeof obj[i]==="object"){//如果这字符串中还包含json或数组时
                                    name?argFormat(obj[i],name+'['+i+']'):argFormat(obj[i],i);  //判断字段名是否为空,空时把i传过去,不为空时把字段名传过去
                                }else{
                                    if(name){  //encodeURIComponent转码,可以把+等不能识别的url参数转成unicode码
                                        result.push(name+"["+i+"]"+'='+encodeURIComponent(obj[i]));
                                      
                                    }else{
                                        result.push(i+'='+encodeURIComponent(obj[i]));
                                    }
                                }
                            }
                            return result.join('&'); //将数组转成字符串反回即可心生成上面的数据
                        }else{
                            result+=obj;
                            return result;
                        };
                    }
                    return argFormat(obj);调用处理
                };
    
    //这是xhr的参数的传递方式,注意,此方式不支持二进制流文件
    
    

    xhr2处理这样的这符就比较容易了

    function xhr2(obj) {
                    var past=new FormData(); //新建FormData对象,可以处理字符,二进制流文件 
                    function argFormat(obj,name) {
                        if(typeof obj==="object"){
                            for(let i in obj){
                                if(typeof obj[i]==="object"){
    
                                    if(obj[i].lastModified){//如果是二进流文,直接加入进去
                                        name?past.append(name,obj[i]):past.append(i,obj[i]);
                                        //past.append('字段名字',字段内容)
                                  
                                    }else{
                                        name?argFormat(obj[i],name+'['+i+']'):argFormat(obj[i],i);
                                    }
                                }else{
                                    if(name){
                                        past.append(name+"["+i+"]",obj[i]);
    
                                    }else{
                                        past.append(i,obj[i])
    
                                    }
                                }
                            }
                            return past;
                        }else{
    
                            return obj;
                        };
    
                    }
                    return argFormat(obj);
                }
    
    基本上与xhr的数据处理差不多,只是方式不一样,返回的是一个FormData对象
    
    

    这里顺便介绍一下new Promise

    function pro(){
    return new Promise(function(resolve, reject) {
        setTimeout(function(){
          resolve(参数);
          //失败时用   resolve(参数);
    
        },3000)
    })
    }
    //要接上面的返回的参数
    
    //async是成对使用的,少了async,await就不能使用,大家注意的一下,基本上就是这样使用的
    async  getData(){
       var data= await pro()//等待参数返回才会再向下执行
    
    }
    
    

    下面是整个ajax插件的代码,

    export default function(Vue, opt) {
        Vue.prototype.$ajax={
            post:function (url, context) {
                function argUrl(obj) {
                    var result=[];
                    function argFormat(obj,name) {
                        if(typeof obj==="object"){
                            for(let i in obj){
                                if(typeof obj[i]==="object"){
                                    name?argFormat(obj[i],name+'['+i+']'):argFormat(obj[i],i);
                                }else{
                                    if(name){
                                        result.push(name+"["+i+"]"+'='+encodeURIComponent(obj[i]));
                                    }else{
                                        result.push(i+'='+encodeURIComponent(obj[i]));
                                    }
                                }
                            }
                            return result.join('&');
                        }else{
                            result+=obj;
                            return result;
                        };
                    }
                    return argFormat(obj);
                };
                function xhr2(obj) {
                    var past=new FormData();
                    function argFormat(obj,name) {
                        if(typeof obj==="object"){
                            for(let i in obj){
                                if(typeof obj[i]==="object"){
    
                                    if(obj[i].lastModified){
                                        past.append(name,obj[i]);
                                    }else{
                                        name?argFormat(obj[i],name+'['+i+']'):argFormat(obj[i],i);
                                    }
                                }else{
                                    if(name){
                                        past.append(name+"["+i+"]",obj[i]);
    
                                    }else{
                                        past.append(i,obj[i])
    
                                    }
                                }
                            }
                            return past;
                        }else{
    
                            return obj;
                        };
    
                    }
                    return argFormat(obj);
                }
    
    
                return new Promise(function(resolve, reject) {
                    var xmlhttp = new XMLHttpRequest();
                    if(typeof FormData !== 'undefined'){//判断是否支持xhr2
                        var urldata=xhr2(context.data);
                      //这里具体查看你上面ajax内容
                        xmlhttp.timeout=context.timeout?context.timeout:10000;
                        xmlhttp.addEventListener('progress',function (e) {
    
                           context.progress?context.progress(e):'';
                        })
                        xmlhttp.addEventListener('load',function (e) {
    
                            context.load?context.load(e):'';
                        })
                        xmlhttp.addEventListener('error',function (e) {
    
                            context.error?context.error(e):'';
                        })
                        xmlhttp.addEventListener('loadstart',function (e) {
                            context.loadstart?context.loadstart(e):'';
    
                        })
                        xmlhttp.addEventListener('loadend',function (e) {
    
                            context.loadstart?context.loadstart(e):'';
                        })
    
                    }else{
                        var urldata=argUrl(context.data);
                    }
                    xmlhttp.onreadystatechange = function() {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                            resolve(JSON.parse(xmlhttp.responseText));
                        }
                    };
    
    
                    xmlhttp.open("POST",url, true);
                    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
                    xmlhttp.setRequestHeader("Accept", "*/*");
                    // xmlhttp.setRequestHeader("Accept-Language", "zh-CN,zh;q=0.8");
                    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //设置请求头信息
                    xmlhttp.send(urldata);
    
                })
            }
        }
    
    
    }
    
    

    使用

    //引入
    import Http from './common/http'
    Vue.use(Http);
    
    然后在你的组件下使用就可以了,
    var data= await this.$ajax.post('http://192.168.26.86/3dplay/public/admin/login',{
                     data:this.sub,
                      load:function(e){
                          //事件
                      }
                 });
    
    

    在根目录建了.babelrc文件,代码如下:

    {
       "presets": [
         "es2015",
         "stage-3"
       ],
       "plugins": []
     }
    
    

    这个文件是用来将代码编译为es5要用到的,要想你的代码兼容ie9请查看Polyfill,这里就不陈述了,
    代码放在:https://github.com/itvwork/vueteam

    下一节我们将会使用koa node mongodb来搭建后环境,没接触过的小伙伴先去看一下资料

    项目启动:

    gulp
    
    

    大家有什么建议可以发邮箱到我的E-mail,
    我的QQ:1830305999
    也可以加入我们的Q群:190949802
    我的主页:www.itvwork.com网站还没建好,正在建设中

    上一篇:全栈开发四(vue登录页面)
    下一篇:【全栈开发六】koa2+mongodb搭建后端开发环境

    相关文章

      网友评论

      本文标题:全栈开发五(编写vue ajax插件)

      本文链接:https://www.haomeiwen.com/subject/rblmextx.html