承诺代码永远不会像我预期的那样工作。我的代码有什么错误？

Question

我使用 Vue3 + laravel 创建应用程序并将其部署在 AWS 上。 虽然我的代码在开发中运行良好，但在生产中却行不通。 我假设承诺代码带来了这个问题。

尽管我添加了类别（文本），但未显示新类别。 当我再次添加类别时，类别一起显示。

删除也不是很好。

有时，添加或删除类别效果很好。

这是我的应用程序。 http://ec2-18-181-225-61.ap-northeast-1.compute.amazonaws.com/

下面的代码是 vue(promise) 代码。

// CategoryShow.vue
<script setup>
import axios from "axios";
import { defineProps, onMounted, ref, watch} from "vue"
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const props = defineProps({
  categoryId: String,
})
const categories = ref([])
const newCategory = ref('')
const category = ref({})
const recipes = ref([])
const newRecipe = ref('')
let categoryId = parseInt(route.params.categoryId)
const submitNewCategory = () => {
  return new Promise((resolve) => {
    axios.post('/api/categories/store', {
        title: newCategory.value
    })
    resolve();
  })
}
const addCategory = async () => {
    await submitNewCategory()
    const a1 = await getMaxIdCategory()
    categoryId =a1.data.id
    newCategory.value = ''
    router.push({name: 'category.show', params: { categoryId: categoryId }})
}
const deleteCategory = async (id) => {
    if (confirm('Are you sure?'))
    {
        axios.delete('/api/categories/' + id)

        if (categories.value.length === 1) {
            router.push('/')
            return
        }
        // if deleting the same category that is currently displayed on the screen...
        if (categoryId === id)
        {
            let res = await getMaxIdCategory()
            categoryId = res.data.id
            router.push({name: 'category.show', params: { categoryId: categoryId }})
            return
        }
        const res1 = await getCategories()
        categories.value = res1.data
    }
}

const getCategory = () => {
    return axios.get('/api/categories/' + categoryId)
}
const getCategories = () => {
    return axios.get('/api/categories')
}
const getMaxIdCategory = () => {
    return axios.get('/api/max')
}
// ----------------------------
// function relate to recipe
const submitNewRecipe = () => {
    axios.post('/api/categories/' + categoryId + '/recipes/store', {
        title: newRecipe.value
    })
}
const addRecipe = async() => {
    submitNewRecipe()
    const a2 = await getRecipes()
    recipes.value = a2.data
    newRecipe.value = ''
}
const getRecipes = () => {
    return axios.get('/api/categories/' + categoryId + '/recipes/')
}
const getCategoriesAndCategoryAndRecipes = async () => {
    categoryId = parseInt(route.params.categoryId)
    const res1 = await getCategories()
    const res2 = await getCategory()
    const res3 = await getRecipes()
    category.value = res2.data
    recipes.value = res3.data
    categories.value = res1.data
}
getCategoriesAndCategoryAndRecipes()
// -----------------------
onMounted(async () => {
    // getCategoriesAndCategoryAndRecipes()
})
watch(route, async () => {
    if (!isNaN(categoryId))
    {
        getCategoriesAndCategoryAndRecipes()
    }
})
</script>

<template>
    <div class="left-container">
        <div class="form-box">
            <h4 style="margin-bottom: 20px; margin-top: 10px">RECIPE HOUSE</h4>
            <form method="post" v-on:submit.prevent="addCategory">
                <input type="text" v-model="newCategory">
            </form>
        </div>
        <ul class="category_ul">
            <li v-for="category in categories" :key="category.id">
                <button class="btn btn-danger" v-on:click="deleteCategory(category.id)">Delete</button>
                <router-link :to="{name: 'category.show', params: {categoryId: category.id }}">
                    <span>{{ category.title }}</span>
                </router-link>
            </li>
        </ul>
    </div>

    <div class="right-container">
        <span class="icon">
            <i class="fas fa-utensils fa-lg"></i>
        </span>
        <div>
            <span>{{ category.title }}</span>
            <!-- <span>{{ currentCategory.title }}</span> -->
            <form method="post" v-on:submit.prevent="addRecipe">
                <input type="text" v-model="newRecipe">
            </form>
            <ul style="margin-top: 15px;">
                <li v-for="recipe in recipes">{{ recipe.title }}</li>
            </ul>
        </div>
    </div>

</template>

getCategories 函数使左侧屏幕显示类别。

getCategory 函数使右侧屏幕显示单个类别。

getRecipes 函数使右侧屏幕显示关联类别的食谱

这个 url 是我的应用程序的 github 页面。 https://github.com/sakamotosora0116/recipehouse_portfolio/tree/master/resources/js/components

谢谢您的帮助。

Answer 1

我想你错过了。然后根据您的 axios 请求。这是一些例子：

const submitNewCategory = () => {
    return new Promise((resolve) => {
        axios.post('/api/categories/store', {
            title: newCategory.value
        }).then(response => {
            resolve(response);
        })
    })
}

使用。然后您正在等待请求完成。