给ajax加个马甲 8月初真热

原创于 2019-08-01 15:44:59 发布 · 329 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一种在项目中统一处理AJAX异常的方法，通过自定义HTTP状态码和数据状态，实现了对各种AJAX请求（GET、POST等）的异常进行统一捕获和处理，包括数据异常弹窗提示和错误状态的判断。

注：因为要统一处理ajax异常而缝制的马甲

由于目前项目数据错误是不触发error , 根据现在项目接口返回数据判断
一般返回对象会有 data.state ="success" 和其他类型没有数据异常的判断用data.state&&status==
httpCode.state也没彻底解决慢慢根据项目情况改进吧

ps ( 返回数据后异常的回调是目前 null 也可以是别的需要特殊异常处理再判断 )

/*
 * 描 述：ajax操作方法
 * jq扩展类

 *目的: 统一异常处理
 * 参数 尽量少 调用简单

 * 由于 目前项目数据错误是不触发error , 根据现在项目接口 返回数据判断
 * 一般返回对象会有 data.state ="success" 和其他类型没有数据异常的判断用data.state&&status==         
 * httpCode.state也没彻底解决 慢慢根据项目情况改进吧

 * 根据不同情况 用不同方法
 * -V 3.0
 */
;(function ($) {
    "use strict";
    var httpCode = {
        success: 200,
        fail: 400,
        exception: 500,
        state:"success" //方便改吧 看实际情况
    };
    var exres = { code: httpCode.exception, info: '通信异常，请联系管理员！' }
     $.extend({
         // get请求方法（异步）:url地址,callback回调函数
         httpAsyncGet: function (url, param, callback) {//纠结 这个param 去掉是不是更好
             if ( $.isFunction( param) ) {//如果没有param参数 把param改成callback
                 callback = param;
                 param = undefined;
             }
             $.ajax({
                 url: url,
                 data: param,
                 type: "GET",
                 dataType: "json",
                 async: true,
                 cache: false,
                 success: function (data,status) {
                    // if (data.state == "success") {//判断返回数据是否异常 ps(目前判断方法(data.state == "success")根据目前后台判断标准 )
                     //有些接口是返回一个数组 没有data.state 这里要特殊处理一下
                     if (data.state == httpCode.state || !data.state&&status== httpCode.state) {
                         callback(data);
                     }else {
                         layer.alert(data.message||exres.info, { icon: 5 });//数据异常弹窗
                         callback(null);
                     }
                 },
                 error: function (XMLHttpRequest, textStatus, errorThrown) {//非200报错
                     layer.alert(exres.info, { icon: 5 });
                     callback(null);
                 },
                 beforeSend: function () {
                     //发送请求前
                 },
                 complete: function () {
                     //请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
                 }
             });
         },
         // get请求方法（同步）:url地址,param参数 返回  t同步就简化去掉回调 直接得值
         httpGet: function (url, param) {
             var res = {};
             $.ajax({
                 url: url,
                 data: param,
                 type: "GET",
                 dataType: "json",
                 async: false,
                 cache: false,
                 success: function (data,status) {
                     if (data.state == httpCode.state || !data.state&&status== httpCode.state) {
                         res = data;
                     }else {
                         layer.alert(data.message||exres.info, { icon: 5 });//后台管理的异常弹窗
                         res = null;
                     }
                 },
                 error: function (XMLHttpRequest, textStatus, errorThrown) {
                     layer.alert(exres.info, { icon: 5 });
                     res = null;
                 },
                 beforeSend: function () {
                 },
                 complete: function () {
                 }
             });
             return res;
         },
         // post请求方法（异步）:url地址,param参数,callback回调函数
         httpAsyncPost: function (url, param, callback) {
             if ( $.isFunction( param) ) {//如果没有param参数 把param改成callback
                 callback = param;
                 param = undefined;
             }
             $.ajax({
                 url: url,
                 data: param,
                 type: "POST",
                 dataType: "json",
                 async: true,
                 cache: false,
                 success: function (data,status) {//有的接口会直接返回数组 没有data.state
                    // console.log(status ) 当前项目不适合用status
                     //!data.state&&status== "success" 判断返回数据为数组或者其他 切 没有其他接口一样有 data.state
                     if (data.state == httpCode.state || !data.state&&status== httpCode.state) {
                         callback(data);
                     }else {
                         layer.alert(data.message||exres.info, { icon: 5 });
                         callback(null);
                     }
                 },
                 error: function (XMLHttpRequest, textStatus, errorThrown) {
                     layer.alert(exres.info, { icon: 5 });
                     callback(null);
                 },
                 beforeSend: function () {
                 },
                 complete: function () {
                 }
             });
         },
         // post请求方法（同步）:url地址,param参数,callback回调函数
         httpPost: function (url, param, callback) {
             if ( $.isFunction( param) ) {//如果没有参数 把param改成callback
                 callback = param;
                 param = undefined;
             }
             $.ajax({
                 url: url,
                 data: param,
                 type: "POST",
                 dataType: "json",
                 async: false,
                 cache: false,
                 success: function (data,status) {
                     if (data.state == httpCode.state || !data.state&&status== httpCode.state) {
                         callback(data);
                     }else {
                         layer.alert(data.message||exres.info, { icon: 5 });
                         callback(null);
                     }
                 },
                 error: function (XMLHttpRequest, textStatus, errorThrown) {
                     layer.alert(exres.info, { icon: 5 });
                     callback(null);
                 },
                 beforeSend: function () {
                 },
                 complete: function () {
                 }
             });
         },
         // ajax 异步封装 url 参数 请求类型
         httpAsync: function (url, param, type, callback) {
             $.ajax({
                 url: url,
                 data: param,
                 type: type,
                 dataType: "json",
                 async: true,
                 cache: false,
                 context: param,
                 success: function (data) {
                     if (data.state == httpCode.state || !data.state&&status == httpCode.state) {
                         callback.apply(this, [data]);
                     }
                     else {
                         layer.alert(data.message||exres.info, { icon: 5 });
                         callback.apply(this);
                     }
                 },
                 error: function (XMLHttpRequest, textStatus, errorThrown) {
                     callback(null);
                     layer.alert(exres.info, { icon: 5 });
                 },
                 beforeSend: function () {
                 },
                 complete: function () {
                 }
             });
         },
     })
})(window.jQuery);