调用Webex API获取个人信息时报data.items.length未定义错误如何解决

错误根因 #

你调用的https://webexapis.com/v1/people/me是Webex提供的查询当前登录用户个人信息的接口，返回值本身就是单个用户对象，不存在嵌套的items数组字段，所以data.items为undefined，读取其length属性就会触发你遇到的类型错误。

修复后的代码 #

document.getElementById('getDetail').addEventListener('click', getDetail);

function getDetail(){
    fetch('https://webexapis.com/v1/people/me', {
        method: 'GET',
        headers: {
            'Content-type': 'application/json',
            'Authorization': `Bearer ${token}`
        },
    })
    .then(function(res){
        return res.json();
    })
    .then(function(data){
        // 不需要遍历，直接读取单个用户对象的属性
        let output =`
             <ul>
                <li>${data.id}</li>
                <li>${data.displayName}</li>
                <li>${data.nickName}</li>
                <li>${data.firstName}</li>
                <li>${data.lastName}</li>
                <li>${data.emails}</li>
            </ul>
        `;
        // 建议这里不要直接覆盖按钮的innerHTML，新增一个单独的容器存放结果更合理
        document.getElementById('getDetail').innerHTML = output;
    })
    // 新增错误捕获，避免未处理的promise报错
    .catch(function(err){
        console.error('请求出错：', err)
    })
}

核心修改点 #

• 移除了遍历data.items的循环逻辑，直接读取接口返回的单个用户对象的对应属性
• 新增了catch错误捕获分支，避免出现未处理的promise异常
• 可选优化：建议新增独立的DOM节点（例如id为userInfo的div）存放用户信息，不要直接替换按钮的内容，否则点击按钮后按钮会被用户信息覆盖消失

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