axios + Vuex - избежать повторного получения обещания об отказе? - PullRequest
Новая
       24

axios + Vuex - избежать повторного получения обещания об отказе?

1 голос
/ 22 марта 2019

Я использую vuex вместе с Vue.js + Django.Это мой первый опыт разработки реактивного интерфейса.

Я использую настройку Django REST и хотел эмулировать ошибку сервера или проблему с подключением и посмотреть, как ее решить.Поэтому я изменил свой ViewSet так, чтобы он выглядел следующим образом ( return 0 / или Response 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) {return api.delete (todos/${ToDoItemId}) .then (response => 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)));
            }
        },

    }

Я думал, что catch в DeleteToDo в компоненте должно быть достаточно, но я все еще получаю эту ошибку:

Uncaught (в обещании) Ошибка: запрос не выполнен с кодом состояния 500

Если добавить в вызов axios следующее: 

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

ТогдаЯ не получаю ошибку Uncaught Promise выше, но это кажется избыточным.Нужно ли ловить дважды?И если я напишу это дважды, как передать e от аксиального вызова вниз к действию, чтобы я мог понять, что делать?

...