MUI的ajax包装


placeholder image
admin 发布于:2017-09-07 21:48:41
阅读:loading

基本介绍

ajax的使用比较简单,以至于所有的请求提交都可能会使用到,但是它的参数中dataType、type属性等基本都是固定的;除了这些属性外一个请求的提交往往都附有等待中的响应效果,如果每个请求都这么写也太业余了;另外对一些后台响应的处理肯定也得有一个全局的包装,比如用户提交一个请求,后台响应未登录或者没有权限*作等,这些完全可以由公共处理拦截,而无需进入ajax的success中处理......

本文主要包装一下mui的ajax请求,下面说一下包装一下的特征:

1、不改变mui.ajax函数的实现,调用方式、参数等保持一致,调用简单;

2、dataType、type等属性默认为最常用的值,如需替换可覆盖;

3、添加平台自带的loading效果,如不需要可采用属性覆盖的方式取消;

4、全局处理部分操作的响应,如用户未登录、没有权限、出现错误等(需与后端集成);

5、回调函数等覆盖默认实现,如success,error等;

如果你对jQuery的ajax比较熟悉,其实这里的实现就看起来比较简单,参考代码如下:

参考代码

代码封装为mui.ajaxRequest

/**

 * mui.ajaxRequest

 * 封装mui.ajax请求,调用方式与一致

 */

(function($doc) {

   mui.extend({

       ajaxRequest: function(url options){

           var defaults commonDefaults(options);

           var options mui.extend(defaults, options);

           options.beforeSend defaults.onBeforeSend;

           options.success defaults.onSuccess;

           options.error defaults.onError;

           mui.ajax(url , options);

      } 

   });

  

   function commonDefaults(options){

      //默认参数定义

      var defaults {

                dataType: "json",

                type: "post",

                timeout: 10000,

                wait: true,

                waitMessage: "努力奔跑中,等等我...",

                onBeforeSend : function(xhr){

                      if(defaults.wait == true){

                           showLoading(defaults.waitMessage);

               }

                      if(options.beforeSend){

                   options.beforeSend(xhr);

                }

         },

                onSuccess : function(data){

                    if(defaults.wait == true) {

                  hideLoading();

              }

                   //后台抛出Exception异常的情况

             if(data && data.exceptionType && (data.exceptionType.indexOf("class com.frame.modules.base.exceptions."!= -1)){

                          plus.nativeUI.alert(data.message , function(){} , "提示:" "取消");

                          return;

             }

                   if(data && data.result && (data.result === "input")) {

                        plus.nativeUI.alert(data.message , function(){} , "提示:" "取消");

                        return;

             }

                   if(options.success){

                 options.success(data);

              }

        },

               onError : function(c){

               hideLoading();

                      if(options.error){

                           options.error(a , b , c);

              }

        }

      };

            return defaults;

   }

  

   function showLoading(msg){

         plus.nativeUI.showWaiting(msg , {

             /*round: "1px", //圆角*/

         style"white",

             back:"none",//不响应返回按钮事件

             background"#66CDAA",

/*background:"rgba(110,120,50,1)",*/

         loading: {

                    display:"inline" ,

                    icon:"/images/waiting.png"

         }

      });

   }

  

   function hideLoading(){

        plus.nativeUI.closeWaiting();

   }

}(mui, document));

调用方式

mui.ajaxRequest(url , {

     //以下参数均为可选,更多自定义参数见上述commonDefaults

    data{},

    successfunction(data){},

    errorfunction(abc){}

});

其中data为参数传递对象,如果此处有beforeSend、success、error等会在系统异常筛选范围外调用success、error实现,打到包装请求处理的目的。

东西比较简单,随便写写,也可参考另一篇文章我理解的jquery.ajax请求的loading处理方式,本站也有此文,同步的。


 点赞


 发表评论

当前回复:作者

 评论列表


留言区