zoukankan      html  css  js  c++  java
  • 基于jquery的ajax方法封装

    在实际的项目里,ajax的应用频率很高,所以尽管jquery或者其他的一些类似的js库做了非常不错的封装,仍然有进一步封装简化的空间和必要

    举一个例子,很久很久以前,我的ajax是这么写的:

    $.ajax({
      url: 'www.baidu.com/getInfo',
      type: 'POST',
      data: {
        name: 'jack',
        age: 18
      },
      dataType: 'json',
      success: function(resp){
      // callback
      },
      error: function(err){
      // error code
      }    
    });

    乍一看挺好没啥问题,但是其实success回调里的逻辑可能很复杂,甚至可能会出现ajax回调里再放一个ajax的情况,那这种写法就很糟糕了,全都杂糅在一起

    可以进行一个简单的封装,这在之前Deferred对象的随笔里已经有提到

    function ajax(url, param, type) {
      // 利用了jquery延迟对象回调的方式对ajax封装,使用done(),fail(),always()等方法进行链式回调操作
      // 如果需要的参数更多,比如有跨域dataType需要设置为'jsonp'等等,也可以不做这一层封装,还是根据工程实际情况判断吧,重要的还是链式回调
      return $.ajax({
        url: url,
        data: param || {},
        type: type || 'GET'
      });
    }
    
    // 链式回调
    ajax('www.baidu.com/getInfo').done(function(resp) {
        // 成功回调
      }).fail(function(err) {
        // 失败回调
      });

    但是虽然做到这一步了,问题还是会来,比如我司,成功的回调里还有一层逻辑判断,像这样:

    // 我司ajax返回的json数据格式
    // 当result为false时,msg中往往有错误信息
    {
      result: true,
      data: {
        name: 'jack'
      },
      msg: null
    }
    
    ajax('www.baidu.com/getInfo').done(function(resp) {
        // 成功回调
        if(resp.result){
          // 当resp中result为true时的操作
          // 往往这个时候要操作处理resp中的data对象信息
        }
        else{
          // 当result为false时的操作,这时往往会根据resp中的另一属性msg来判断具体处理
        }
      }).fail(function(err) {
        // 失败回调
      });

    问题有二:

    第一,我每个ajax中都需要写一个同样的相对固定的逻辑判断(每个公司或者项目组可能会有不同,但是就项目本身而言,或者放大了到公司来说必然是固定的),我觉得很烦。

    第二,如果我只想专注处理数据,比如在成功回调里,我直接拿到要处理要渲染的数据,在失败的回调里我直接拿到错误的代码,有没有这样的可能做进一步的封装。

    其实这俩问题是一个,总结一句话,就是不想写那么多if,else。有一句话我觉得说得很好,逻辑是守恒的,但如果是可预见的逻辑,是有精简的可能的,我们这种显然属于可预见的逻辑。

    二次封装利用了延迟对象的then方法,具体看代码:

    function handleAjax(url, param, type) {
      return ajax(url, param, type).then(function(resp){
          // 成功回调
          if(resp.result){
            return resp.data; // 直接返回要处理的数据,作为默认参数传入之后done()方法的回调
          }
          else{
            return $.Deferred().reject(resp.msg); // 返回一个失败状态的deferred对象,把错误代码作为默认参数传入之后fail()方法的回调
          }
        }, function(err){
          // 失败回调
          console.log(err.status); // 打印状态码
        });
    }
    
    handleAjax('www.baidu.com/getInfo').done(function(resp){
        // 当result为true的回调
      }).fail(function(err){
        // 当result为false的回调
      });

    这就把之前很杂揉的代码进一步的的简化,也方便了维护,比如某一天跟你说result不再是布尔值了,直接改成状态码这样的东西了,如果按以前一个ajax写一个判断,简直要疯。

  • 相关阅读:
    思科模拟器——常用命令
    思科模拟器——允许远程telnet连接控制路由器/交换机
    思科模拟器——使用路由器分割局域网
    如何将centos7作为DNS服务器
    Centos7设置grub密码保护
    curl提示不支持https协议解决方法
    Kettle入门--作业和转换的使用
    oracle命令导入SQL脚本
    centos7 部署elasticsearch
    Nginx通过Keepalived实现高可用
  • 原文地址:https://www.cnblogs.com/fxxkhigh/p/5669904.html
Copyright © 2011-2022 走看看