Question

我正在将vuex与Vue.js + Django一起使用。这是我对反应式前端开发的首次尝试。

我正在使用Django REST设置，并希望模拟服务器错误或连接问题，并了解如何处理。因此，我将ViewSet修改为如下形式（返回0 /或响应403 ）。外观如下：

class ToDoViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows messages to be viewed or edited.
    """
    queryset = ToDoItem.objects.all()
    serializer_class = ToDoItemSerializer
    # return 0 instead of a Response object for testing purposes 
    def destroy(self, request, *args, **kwargs):
        instance = self.get_object()
        instance_id = instance.id
        # self.perform_destroy(instance)
        return 0
        # return Response(data={'id': instance_id}, status=status.HTTP_200_OK)

我正在使用 axios进行DELETE通话： /// api映射到axios.create对象 deleteToDoItem（ToDoItemId）{ 返回api.delete（todos/${ToDoItemId}） .then（响应=> response.data） }

我的vuex store.js中有以下：

actions: {
    ....
    deleteToDoItem(context, toDoItemId) {
      messageService.deleteToDoItem(toDoItemId).then(response => context.commit('REMOVE_TODO', response));
    },

以及我的toDo Vue组件中的以下内容：

import { mapActions } from 'vuex';
    export default {
        name: 'todo-item',
        props: ['todo'],
        methods: {
            ...mapActions([
                'deleteToDoItem',
            ]),
            ///  DeleteToDo uses the mapped action 'deleteToDoItem'
            deleteToDo(todo_id) {
                this.deleteToDoItem(todo_id).then(response => this.$store.commit('REMOVE_TODO', response)).catch((e => console.log(e)));
            }
        },

    }

我认为该组件的DeleteToDo中的catch应该足够，但仍然出现此错误：

未捕获（承诺）错误：请求失败，状态码为500

如果我在axios调用中添加以下内容：

deleteToDoItem(ToDoItemId) {
        return api.delete(`todos/${ToDoItemId}`)
            .then(response => response.data).catch(e => e)
    }

然后我没有收到上面的Uncaught Promise错误，但这似乎是多余的。我必须赶上两次吗？而且，如果我确实编写了两次，该如何将e从axios调用传递到该动作，以便我可以识别该怎么做？

axios + Vuex-避免两次遇到拒绝Promise？

0 个答案: