1

I'm using vuex alongside Vue.js + Django. It's my first foray into reactive front-end development.

I'm using a Django REST setup, and wanted to emulate a server error or connection problem, and see how to handle that. So I modified my ViewSet to look like this (return 0/ or Response 403). Here's how it looks:

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)

I'm using axios to make the DELETE call: /// api is mapped to an axios.create object deleteToDoItem(ToDoItemId) { return api.delete(todos/${ToDoItemId}) .then(response => response.data) }

I have the following in my vuex store.js:

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

And the following in my toDo Vue component:

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)));
            }
        },

    }

I thought the catch in DeleteToDo in the component should suffice, but I'm still getting this error:

Uncaught (in promise) Error: Request failed with status code 500

If I add the following in the axios call:

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

Then I don't get the the Uncaught Promise error above, but this seems redundant. Do I have to catch twice? And if I do write it twice, how do I pass the e from the axios call down to the action so I can discern what to do?

zerohedge
  • 3,185
  • 4
  • 28
  • 63
  • I think you will have to call the `.catch()`-block in your vuex store.js. I got a similar situation and solved it by this approach. – Kodiak Mar 22 '19 at 19:55
  • but then I can't properly discern which error happened, how can I pass the original `e` from the axios call to the parent? – zerohedge Mar 22 '19 at 22:29
  • you could return the dispatch-methods directly without any .then(), .catch(), .finally()-block. – Kodiak Mar 22 '19 at 22:39
  • Can you elaborate? – zerohedge Mar 22 '19 at 22:42
  • Remove the then and catch blocks everywhere except in the call of your .vue-file. In your axios-js file it should look like this: `return api.delete(`todos/${ToDoItemId}`)` . And in your vuex file like this: `return messageService.deleteToDoItem(toDoItemId)` – Kodiak Mar 22 '19 at 22:49
  • I found some additional info according promises [here](https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it?rq=1). – Kodiak Mar 22 '19 at 22:55
  • @Kodiak your suggestion only resulted in more errors, sadly. – zerohedge Mar 22 '19 at 23:18

0 Answers0