在 axios get 中出现未定义的错误答案

【问题标题】：getting undefined error in axios get在 axios get 中出现未定义的错误
【发布时间】：2018-08-07 06:16:42
【问题描述】：

我的 API 响应如下所示

data: {
    id: 9,
    quantity: 2,
    address: "Test Address",
    total_price: 144.42,
    created_at: "August 07, 2018 04:02:46 AM",
    customer: {
        id: 3,
        name: "Prof. Laurel Lemke",
        email: "velma32@example.org",
        role_id: 3,
    },
    product: {
        id: 7,
        name: "Pellentesque semper",
        description: "raesent sit amet elementum purus.
        price: "72.21",
        cover_image: "7CPVS7yjqba9iJ7J.jpg",
    }

}

我正在使用 axios 获取它，当单击按钮时它会触发

fetchOrder: function(id){
    let vm = this;
    axios.get('api/order/' + id)
    .then( response => {
        vm.order = response.data.data;
        vm.orderModal = true;
    })
    .catch( error => {
        console.log(error);
    });
},

响应成功，我正在输出值

<span>{{ order.address }}</span> //Test Address

但是，当我尝试时

<span>{{order.customer.name}}</span>

我收到一个错误

Cannot read property 'name' of undefined

我该如何解决这个问题？谢谢

【问题讨论】：

您的order.customer 没有name 对象，或者您的客户为空或undefined。

标签： javascript vue.js vuejs2 axios

【解决方案1】：

问题是您的代码已执行，但 API 调用为 Async，因此直到 API 返回响应但代码已执行时才定义客户。您需要先检查客户，然后才能访问该值。

order.address 有效，因为 order 可能是对象，因此 order.address 将是未定义的，直到获取 API 响应。但是，对于 order.customer.name，customer 未定义，因此 customer.name 中断。

检查{{order.customer && order.customer.name}}，它应该可以正常工作

【讨论】：

【解决方案2】：

改成：

<span>{{order.customer && order.customer.name}}</span>

【讨论】：