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

Question

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

Answer 1

axios,在请求响应部分拦截

Answer 2

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

Answer 3

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

Answer 4

lodash

lodash _get()

Answer 5

不要直接使用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);
    }
  }
);

Answer 6

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

Answer 7

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