Vuex 액션 내의 Axios 함수에서 디스패치 캐치(오류)로 오류 메시지를 반환하려면 어떻게 해야 합니까?

Vuex 액션 내의 Axios 함수에서 디스패치 캐치(오류)로 오류 메시지를 반환하려면 어떻게 해야 합니까?

axios를 사용하여 axis 호출을 하는 액션이 있는데, axios catch 함수에 의해 axios가 에러를 반환할 때마다 catch를 받기 때문에, 같은 에러를 dispatch catch 함수에 흘려보낼 수 있는지 알고 싶습니다.

// 새로운 에러("test error inside")를 설정하려고 했지만 디스패치가 에러를 검출하지 못한 것 같습니다.

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

디스패치로 잡을 수 있는 캐치 에러를 공리에게 던져 주었으면 한다.

액션에서 약속을 반환하고 컴포넌트에서 처리하면 됩니다.

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

그 약속은 어느 쪽이든 돌아온다.resolve또는reject그것은 당신에게 속박될 것입니다.then또는catch

Promise를 실행 상태로 되돌리고 응답/오류를 메서드로 처리할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/57392687/how-can-i-return-error-message-from-axios-function-inside-vuex-action-to-dispatc