基于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写一个判断，简直要疯。