前端如何全局校验后端返回的数据

undefined
  • 113

例如,期望接口返回的data[{xxx:xxx}],但是接口可能会返回[]或者[{}],甚至接口返回的json里面可能没有对应的字段,前端如果每次请求接口获得结果时都判断一下,感觉太臃肿了(感觉代码健壮性和便利性有冲突),想请教一下有没有什么办法可以封装一个方法全局检测,或者有没有什么别的思路,求指点。

回复
阅读 1.2k
7 个回答
✓ 已被采纳

axios,在请求响应部分拦截

楼上已经说了一些解决方法了,我就不重复了。我这里提供一个极端的解决方法,就是不兼容,不解决,一切按文档来,这种不按文档返回数据的 API 要趁早暴露出来,然后甩后端脸上,让他们去改。要不然此例一开,后患无穷~

这应该让后端统一返回的格式吧

不要直接使用ajax,封装ajax,全局处理。

如果使用axios的话,使用拦截器。

$.ajaxSetup({
    dataType: "json",
    cache: false,
    headers: {
        "token": token
    },
    xhrFields: {
        withCredentials: true
    },
    complete: function(xhr) {
        //token过期,则跳转到登录页面
        if(xhr.responseJSON.code == 401){
            parent.location.href = baseURL + 'login.html';
        }
    }
});

axios.interceptors.response.use(
  response => {
    // 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
    // 否则的话抛出错误
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  // 服务器状态码不是2开头的的情况
  // 这里可以跟你们的后台开发人员协商好统一的错误状态码
  // 然后根据返回的状态码进行一些操作,例如登录过期提示,错误提示等等
  // 下面列举几个常见的操作,其他需求可自行扩展
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录
        // 未登录则跳转登录页面,并携带当前页面的路径
        // 在登录成功后返回当前页面,这一步需要在登录页操作。
        case 401:
          vant.Toast.fail("身份验证失败,请关闭重新进入。");
          break;

        // 403 token过期
        // 登录过期对用户进行提示
        // 清除本地token和清空vuex中token对象
        // 跳转登录页面
        case 403:
          vant.Toast.fail("登录过期,请关闭重新进入。");
          // 清除token
          break;

        // 404请求不存在
        case 404:
          vant.Toast.fail("您访问的网页不存在。");
          break;
        // 其他错误,直接抛出错误提示
        default:
          vant.Toast.fail(error.response.data.message);
      }
      return Promise.reject(error.response);
    }
  }
);

应该是没什么全局处理得办法吧;每个接口得数据格式可能都不一样;
还是单个对象 字段,做兜底处理;

王志伟
  • 2
新手上路,请多包涵

大兄弟,此题无解,下一题

你知道吗?

宣传栏