如何从Vuex操作中的axios函数返回错误消息以分派捕获（错误）？

Question

我有一个使用axios进行ajax调用的操作，每当axios返回错误时，它就会被axios catch函数捕获，因此我想知道是否有可能将相同的错误抛出到dispatch catch函数。

我尝试//抛出新错误（“内部测试错误”）；从axios内部捕获（错误），但dispatch似乎无法捕获错误

vuex存储上的操作代码

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");
                    // }       
                  })
    }
}

关于我在vue组件上的方法

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

我希望axios抛出catch error，该错误将通过调度进行捕获

Answer 1

您可以只返回Promise in action并在方法中处理响应/错误

vuex商店：

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

在组件中执行以下操作：

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

Answer 2

只需从你的操作中返回一个promise，然后在你的组件上处理它：

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

在您的组件上：

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

promise将返回一个解决或一个拒绝，它将绑定到您的然后或捕获