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來獲取它的長度。