res.data详解

发布时间：2023-05-19

res.data详解

res.data是指在前后端交互中，后端向前端返回的数据。在使用这个数据时，我们需要对它进行详细解析和使用。本文就对res.data从多个方面进行阐述，帮助大家更好地理解和应用它。

一、res.data为空

在前后端交互过程中，如果后端返回的res.data为空，可能是因为查询结果为空，或者后端代码逻辑不正确。我们可以通过以下方式来判断res.data是否为空：

if(!res.data){
  console.log('res.data为空');
}

如果res.data为空，我们需要将其赋值为一个空对象：

res.data = res.data || {};

这样的话，即使后端返回的数据为空，前端也可以正常访问res.data中的属性。

二、res.data什么意思

我们可以将res.data看作是后端向前端传递的数据容器。它可以是一个对象，也可以是一个数组。我们可以通过以下方式来获取res.data的类型：

console.log(typeof res.data);

如果res.data是一个对象，我们可以通过以下方式来获取它的属性：

console.log(res.data.propertyName);

如果res.data是一个数组，我们可以通过以下方式来获取它的元素：

for(let i=0;i<res.data.length;i++){
  console.log(res.data[i]);
}

三、res.data.msg

在前后端交互过程中，如果后端需要返回一些提示信息，可以将这些信息存放在res.data.msg中，例如：

{
  code: 200,
  msg: '登录成功',
  data: {
    username: '张三',
    age: 20
  }
}

前端可以通过以下方式来获取res.data.msg：

console.log(res.data.msg);

四、前端接收后端res.data数组

在前后端交互中，后端可能会返回一个数组类型的res.data。前端可以通过以下方式来接收和使用这个数组：

axios.get(url).then(res=>{
  let dataArr = res.data;
  dataArr.forEach((item,index)=>{
    console.log(item);
  });
})

或者：

axios.get(url).then(res=>{
  res.data.forEach((item,index)=>{
    console.log(item);
  });
})

五、res.data.list写法

在一些后端框架中，返回的数据可能是一个包含list属性的对象。例如：

{
  code: 200,
  msg: '查询成功',
  data: {
    list: [{},{}],
    total: 100
  }
}

前端可以通过以下方式来获取res.data.list：

axios.get(url).then(res=>{
  let listArr = res.data.list;
  listArr.forEach((item,index)=>{
    console.log(item);
  });
})

六、res.data.list语法安卓不支持

在安卓系统中，可能会出现语法错误，例如：

let dataList = res.data.list || [];  // 这种写法在安卓系统中会报错
let dataList = (res.data.list && res.data.list.length)>0 ? res.data.list : [] // 推荐使用这种写法

如果我们使用了安卓不支持的res.data.list语法，我们可以通过以下方式来避免这个问题：

let dataList = (res.data.list && res.data.list.length)>0 ? res.data.list : [];

七、res.data.data.records

在某些后端框架中，返回的res.data中可能会存在一个data属性，而这个data属性中又包含一个records属性，例如：

{
  code: 200,
  msg: '查询成功',
  data: {
    records:[{},{}],
    total: 100
  }
}

我们可以通过以下方式来获取res.data.data.records：

axios.get(url).then(res=>{
  let recordsArr = res.data.data.records;
  recordsArr.forEach((item,index)=>{
    console.log(item);
  });
})

八、res.data和res.data.data

在前后端交互中，我们有时候既需要使用res.data中的属性，也需要使用res.data.data中的属性。我们可以通过以下方式来访问它们：

console.log(res.data.propertyName);
console.log(res.data.data.propertyName);

如果res.data中包含了res.data.data的属性，我们可以使用以下方式来获取它们：

console.log(res.data.propertyName);
console.log(res.data.data.propertyName);
console.log(res.data.hasOwnProperty('propertyName')); // 返回true
console.log(res.data.data.hasOwnProperty('propertyName')); // 返回false

九、res.data.语法

在一些后端框架中，res.data可能会包含带有点的属性名，例如：

{
  code: 200,
  msg: '查询成功',
  'user.name': '张三',
  'user.age': 20
}

我们可以通过以下方式来获取这些属性值：

console.log(res.data['user.name']);
console.log(res.data['user.age']);

但是，如果我们要使用res.data.user.name这种语法来获取属性值，就会出现错误。这时，我们可以使用以下方式来避免错误：

console.log(res.data['user.name']);
console.log(res.data.hasOwnProperty('user.name'));  // 返回true

十、res.data怎么取长度

在前后端交互中，我们有时还需要知道res.data的长度，例如res.data中有多少条数据。我们可以通过以下方式来获取res.data的长度：

console.log(res.data.length);  // 仅限于res.data是一个数组的情况下
console.log(Object.keys(res.data).length);  // 仅限于res.data是一个对象的情况下

如果我们使用了res.data.length来获取长度，而res.data不是一个数组，就会出现错误。这时，我们可以使用Object.keys(res.data).length来获取它的长度。

推荐文章