axios从arraylist获取JSON object时显示response headers而非displayName

问题原因 #

你在axios请求的回调中，直接将完整的响应对象赋值给了jsonInfo变量：axios封装的响应对象并非只有接口返回的业务数据，它还包含响应状态码、响应头、请求配置等元信息，所以页面渲染时会把包括响应头在内的整个响应对象内容全部输出，自然无法正常展示预期的displayName字段。

修复方案 #

• 修正axios响应的取值逻辑：接口实际返回的JSON数据存放在响应对象的data字段下，赋值时需要取response.data而非直接取整个response
• 调整模板渲染逻辑：因为接口返回的是数组结构，不能直接渲染整个数组，需要取对应数组项的displayName字段做展示
• 补充请求异常捕获逻辑，避免接口报错时出现无提示的运行异常

修复后参考代码 #

<a class="nav-link dropdown-toggle text-nowrap px-3" v-d-toggle.user-actions>
    <img class="user-avatar" src="@/assets/images/avatars/0.jpg" alt="User Avatar"> 
    <span class="d-none d-md-inline-block">{{ jsonInfo.length ? jsonInfo[0].displayName : '' }}</span>
</a>

<script>
import axios from 'axios'; 

export default {
    data() {
        return {
            jsonInfo: [],
        }
    },
    mounted () {
        axios
            .get('http://localhost:5000/info/users')
            .then(response => {
                // 取响应体中的实际业务数据赋值
                this.jsonInfo = response.data
            })
            .catch(err => {
                console.log('用户信息请求异常', err)
            })
    }
}
</script>

注：示例中jsonInfo[0]为数组下标示例，可根据实际业务逻辑匹配到对应用户条目后，读取displayName字段展示即可。

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