使用Axios调用Web API获取名言数据时，提取text属性返回undefined的问题求助

嘿，我来帮你搞定这个问题～你遇到的undefined问题大概率是因为实际返回的数据结构和你预期的不一样，虽然你看到的控制台输出是单个对象，但有时候API会把返回结果包裹在数组里（哪怕count=1），这时候直接访问quote.text自然就拿不到值啦。

下面是具体的排查和解决步骤：

第一步：先确认返回数据的真实结构 #

在你的then回调里先打印出数据的类型和完整结构，搞清楚到底是单个对象还是数组：

axios.request(options).then(function (response) { 
  let quoteData = response.data;
  // 打印数据类型和完整结构，帮你排查
  console.log("数据类型:", typeof quoteData);
  console.log("完整返回数据:", quoteData);
}).catch(function (error) { 
  console.error(error); 
});

如果控制台输出的数据类型是object但实际是数组（数组的typeof结果也是object），那你需要用Array.isArray()来准确判断。

第二步：兼容对象和数组两种情况的最优写法 #

根据API可能返回的两种结构，我们可以写一段健壮的代码来提取text属性，同时用**可选链操作符?.**避免出现报错：

const axios = require("axios");
const options = { 
  method: 'GET', 
  url: 'https://famous-quotes4.p.rapidapi.com/random', 
  params: {category: 'technology', count: '1'}, 
  headers: { 
    'X-RapidAPI-Key': 'secret key', 
    'X-RapidAPI-Host': 'famous-quotes4.p.rapidapi.com' 
  } 
};

axios.request(options).then(function (response) { 
  let quoteData = response.data;
  let quoteText;

  // 判断是否为数组
  if (Array.isArray(quoteData)) {
    // 数组的话取第一个元素的text，用?.避免数组为空时报错
    quoteText = quoteData[0]?.text;
  } else {
    // 单个对象直接取text
    quoteText = quoteData?.text;
  }

  console.log("提取到的名言:", quoteText); 
}).catch(function (error) { 
  console.error(error); 
});

为什么会出现这个问题？ #

很多API在count=1时，依然会返回一个包含单个元素的数组，而不是直接返回对象。你之前看到的控制台对象输出可能是你手动打印response.data时，浏览器或Node.js自动展开了数组的第一个元素，让你误以为是单个对象，但实际代码里response.data是数组，所以quote.text就会是undefined。

这个方法既兼容了API可能返回的两种结构，又通过可选链保证了代码不会因为数据异常而崩溃，应该能完美解决你的问题～

内容的提问来源于stack exchange，提问作者Yippiekaiaii