Nuxt 当 asyncData 调用不返回数据时，立即显示错误

Question

我有一个这样的 nuxtjs 页面

<template>
    <main>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-3"></div>
                <div class="col-sm-6">
                    <div class="a-spacing-top-medium"></div>
                    <h2 style="text-align:center;">Add a new product</h2>
                    <form>

                        <div class="a-spacing-top-medium">
                            <label>Category</label>
                            <select class="a-select-option" v-model="categoryID">
                                <option v-for="category in categories" :value="category.id" :key="category.id">{{ category.type }}</option>
                            </select>
                        </div>

                        <div class="a-spacing-top-medium">
                            <label>Owner</label>
                            <select class="a-select-option" v-model="ownerID">
                                <option v-for="owner in owners" :value="owner.id" :key="owner.id">{{ owner.name }}</option>
                            </select>
                        </div>

                        <div class="a-spacing-top-medium">
                            <label>Title</label>
                            <input type="text" class="a-input-text" style="width:100%;" v-model="title" :placeholder="products.title" />
                        </div>

                        <div class="a-spacing-top-medium">
                            <label>Price</label>
                            <input type="number" class="a-input-text" style="width:100%;" v-model="price" :placeholder="products.price" />
                        </div>

                        <div class="a-spacing-top-medium">
                            <label>Stock Qty</label>
                            <input type="number" class="a-input-text" style="width:100%;" v-model="stockquantity" :placeholder="products.stockquantity" />
                        </div>

                        <div class="a-spacing-top-medium">
                            <label>Description</label>
                            <textarea style="width:100%;" v-model="description" :placeholder="products.description"></textarea>
                        </div>

                        <div class="a-spacing-top-medium">
                            <label>Add Photo</label>
                            <div class="a-row a-spacing-top-medium">
                                <label class="choosefile-button">
                                    <i class="fal fa-plus"></i>
                                    <input type="file" @change="onFileSelected" />
                                    <p style="margin-top:-70px;">{{ fileName }}</p>
                                </label>
                            </div>
                        </div>

                        <hr>

                        <div class="a-spacing-top-large">
                            <span class="a-button-register">
                                <span class="a-button-inner">
                                    <span class="a-button-text" @click="onUpdateProduct">Update product</span>
                                </span>
                            </span>
                        </div>

                    </form>
                </div>
                <div class="col-sm-3"></div>
            </div>
        </div>
    </main>
</template>

<script>
export default {
    async asyncData({ $axios, params }) {
        try {
            let categories = $axios.$get("http://localhost:3000/api/category");
            let owners = $axios.$get("http://localhost:3000/api/owner");
            let product = $axios.$get(`http://localhost:3000/api/products/${params.id}`);

            const [catResponse, ownerResponse, productRes] = await Promise.all([categories, owners, product]);

            return {
                categories: catResponse,
                owners: ownerResponse,
                products: productRes[0],
            }
        } catch (error) {
            console.log(error);
        }
    },

    data() {
        return {
            categoryID: null,
            ownerID: null,
            title: "",
            price: "",
            stockquantity: "",
            description: "",
            selectedFile: null,
            fileName: ""
        };
    },

    mounted() {
        this.afterLoad();
    },

    methods: {
        afterLoad() {
            console.log(this.products);
        },
        onFileSelected(event) {
            this.selectedFile = event.target.files[0];
            this.fileName = event.target.files[0].name;
        },
        async onUpdateProduct() {
            try {
                let data = new FormData();
                data.append("title", this.title);
                data.append("price", this.price);
                data.append("stockquantity", this.stockquantity);
                data.append("description", this.description);
                data.append("categoryid", this.categoryID);
                data.append("ownerid", this.ownerID);
                data.append("selectedFile", this.selectedFile);
                data.append("fileName", this.fileName);

                let result = await this.$axios.$put(`http://localhost:3000/api/products/${this.$route.params.id}`, data);
                this.$router.push('/');
            } catch (error) {
                console.log(error);
            }
        }
    }
}
</script>

当这个 axios 调用失败，或者不返回任何数据时

let product = $axios.$get(`http://localhost:3000/api/products/${params.id}`);

页面立即显示错误提示

Cannot read property 'title' of undefined

我还是 vuejs 和 nuxtjs 的新手，只是无法弄清楚哪里出了问题。即使我评论了这部分代码

data.append("title", this.title);
data.append("price", this.price);
data.append("stockquantity", this.stockquantity);
data.append("description", this.description);
data.append("categoryid", this.categoryID);
data.append("ownerid", this.ownerID);
data.append("selectedFile", this.selectedFile);
data.append("fileName", this.fileName);

它仍然显示相同的错误消息。如果 $axios 调用返回数据，则代码可以正常工作。

Answer 1

在您的 html 部分中，我看到“products.title”，您确定产品不是未定义的吗？例如，当您不返回任何值时，客户端将查找“产品”变量