How can I return error message from axios function inside Vuex action to dispatch catch(error)?

Question

I have an action where ajax call is made using axios,whenever the axios returns errors it gets catch by axios catch function , so i want to know if its possible to throw that same error to dispatch catch function.

I've tried to //throw new Error("test error inside"); from inside of axios catch(error) but dispatch doesnot seem to catch the error

Action code on vuex store

actions:{
    assignOrder(context, assign){
        axios.post('/assignOrder',assign)
                  .then((response) => {
                    console.log(response)
                  })
                  .catch((error) => {
                     //I want to throw error catched from here
                        console.log(error.response.data.errors)
                      //throw new Error("test error inside");
                    // }       
                  })
    }
}

On my method on vue component

methods:{
      setAssign(){
        this.assign.order_id = this.order.id
        if(this.validate()){
          this.errors = {};
          this.$store.dispatch('assignOrder', this.assign).then(() => {
            showNotify('success','Order has been assigned')
            this.$store.dispatch('getOrders',this.active)
          })
          .catch((error) => {
             //catch the error here
              alert(error)    
            })
        }
        else{
          this.showErr = true;
        }
      },
}

I want the axios to throw catch error which will catch by dispatch

Answer 1

Just return a promise from your action then handle that on your component :

actions: {
  assignOrder(context, assign) {
    return new Promise((resolve, reject) => {
      axios.post('/assignOrder', assign)
        .then((response) => {
          resolve(response)
        })
        .catch((error) => {
          reject(error.response.data.errors)
        })
    })
  }
}

and on your component :

methods: {
  setAssign() {
    this.assign.order_id = this.order.id
    if (this.validate()) {
      this.errors = {};
      this.$store.dispatch('assignOrder', this.assign).then((res) => {
          showNotify('success', 'Order has been assigned')
          console.log(res)
          this.$store.dispatch('getOrders', this.active)
        })
        .catch((error) => {
          // catch the error 
          alert(error)
        })
    } else {
      this.showErr = true;
    }
  },
}

The promise will return either a resolve or a reject which will be bound to your then or catch

Answer 2

You can just return Promise in action and handle the response/error in method

vuex store:

actions:{
    assignOrder(context, assign){
        return axios.post('/assignOrder',assign)            
    }
}

and in your component do the following:

methods:{
    setAssign() {
        this.assign.order_id = this.order.id
        if (this.validate()) {
            this.errors = {};
            this.$store.dispatch('assignOrder', this.assign).then(() => {
                showNotify('success','Order has been assigned')
                this.$store.dispatch('getOrders', this.active)
            }).catch((error) => {
                //catch the error here
                alert(error)    
            })
        } else{
            this.showErr = true;
        }
    },
}