自定义jQuery的ajax 拦截函数

唯雪
2017-11-29 20:52:08
技术小栈
javascript nodejs

唯雪博客

一般前端都是在需要发请求的地方定义一个Ajax，可以在Ajax中定义请求的地址与请求方式，但是如果逐个定义Ajax请求，又逐个修个，那就非常繁琐，而且容易出错，所以可以根据需求定义一个统一的方法，放在公共的js文件中，只需要引入这个文件并修改开发与生产模式就可以了。

方法如下所示：

var whatMode = 'prod' // 指明使用开发模式还是生产模式的变量，可选值'dev'开发/'prod'生产
// obj对象有以下属性fake, url, succ, fail，在下方调用makeAction函数时会说明各个参数
var makeAction = function(obj) {
  if (whatMode === 'dev') {
    $.ajax({
      url: obj.fake,
      dataType: 'json',
      success: function (data) {
        obj.succ(data)
      },
      error: function(err) {
        obj.fail(err)
      }
    })
  } else if (whatMode === 'prod') {
     $.ajax({
      url: obj.url,
      async:obj.async,
      type:obj.type,
      data:obj.data,
      success: function (data) {
        obj.succ(data)
      },
      error: function(err) {
        obj.fail(err)
      }
    })
  }
}

然后再在需要发送Ajax的地方进行调用

makeAction({
   fake: 'json/data2.json', // 自己编的假数据的本地文件的路径地址
   url: urlData.ajaxurl,
   type:'GET',
   data:urlData.ajaxData,
   succ: function (result) {  // success回调函数
       console.log( result )
   },
   fail: function (err) { // error回调函数
       alert('页面数据请求失败')
   }
});

本文为唯雪原创文章,转载无需和我联系,但请注明来自唯雪博客cocostory.cn