0

I am working with Vue & Vuex, making a fairly simple axios DELETE call to the server inside of a promise.

I noticed that the DELETE call was working correctly, the Vuex commit was also working, however my resolve was not.

I got everything to work by placing the resolve() BEFORE my commit(), however I do not understand WHY it needs to happen this way.

Hopefully someone has an answer so I can learn. See code below, and thank you in advance. 

export const remove = ({ state, commit }, uid) => {
  return new Promise((resolve, reject) => {
    t.$axios.delete(t.$consts.DELETE_URL + '/' + uid).then((response) => {
        if (response.status === 200) {
            resolve()
            commit('remove', uid)
        }
    }).catch((error) => {
        reject(error.response)
    })
  })
}
muffinlab
  • 33
  • 1
  • 3
  • do you get an error (in console for example) if you put it the other way around - i.e. in what way was it "not working" - the only way I can see – Jaromanda X Oct 02 '18 at 02:02
  • 2
    [avoid the promise constructor anti-pattern](https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it) - your code is better written https://pastebin.com/yFxKdtUa - see if that works for you – Jaromanda X Oct 02 '18 at 02:06
  • one thing your code assumes is that the `error` in `.catch` will contain a property `.response` – Jaromanda X Oct 02 '18 at 02:10
  • Can you explain more about what is happen when you put `resolve` after `commit` and how you call this function. – User 28 Oct 02 '18 at 04:45
  • Sorry, I should have been more clear about how it "was not working". When commit() was placed on the line above resolve(), it wouldn't resolve the promise. If I attempted to catch the error, there was none. I like the links @JaromandaX gave me, I'm going to look more into anti-pattern and see if I can take something away from that. – muffinlab Oct 02 '18 at 11:37
  • so, does https://pastebin.com/yFxKdtUa actually work? – Jaromanda X Oct 02 '18 at 11:42
  • It does not. Similar issue - the delete occurs on the backend, the commit() updates the local Vuex Store, however I get: `Uncaught (in promise) undefined ` – muffinlab Oct 02 '18 at 12:08
  • It might be worth pointing out that this code is a Vuex Action, and the commit is a mutation. – muffinlab Oct 02 '18 at 12:11
  • oh ... `Uncaught (in promise) undefined` ... there's actually an error being thrown by `commit('remove', uid)` - but the error thrown by the commit has no `response` property, hence the catch is doing a `throw undefined` and it is this rejection that is uncaught ... this also explains why your code needs to resolve first, because the commit throws an error ... try https://pastebin.com/hCB1yfCJ ... now you should be able to see what error `commit` is throwing (which was lost in both your code and my previous pastebin – Jaromanda X Oct 02 '18 at 13:16
  • Found this and it was the answer for me: [https://stackoverflow.com/questions/50989588/vuex-action-which-returns-a-promise-never-resolves-or-rejects](https://stackoverflow.com/questions/50989588/vuex-action-which-returns-a-promise-never-resolves-or-rejects) – muffinlab Oct 10 '18 at 19:57

0 Answers0