[Vue.js][문제해결] status: 200 대신 severStatus: 2가 넘어 오는 문제

Vue.js 프로젝트를 Node.js 서버와 연동하고 있다. MySQL DB의 데이터를 수정하는 기능을 구현하는데 [그림 2]와 같이 status 값이 넘어오지 않는 문제가 있었다.

아래 코드는 DB 데이터를 수정하기 위한 doSave() 함수인데 데이터를 성공적으로 수정하여 status 값 200이 뜨면 if 조건문을 실행하도록 하였다.

doSave() {
  this.$swal({
    title: '카테고리 정보를 수정 하시겠습니까?',
    // text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    cancelButtonText: '취소',
    confirmButtonText: '저장'
  }).then(async (result) => {
    if (result.isConfirmed) {
      const loader = this.$loading.show({ canCancel: false })
      const r = await this.$put(
        `/api/product/category/${this.selectedItem.product_category_id}`,
        {
          param: {
            category_name: this.selectedItem.category_name,
            category_description: this.selectedItem.category_description
          }
        }
      )
      loader.hide()

      // put이 적용되었지만 status키값 200이 넘어 오지 않아 if 조건문 기능하지 않는 문제 발생
      console.log(r) // 콘솔 로그 확인해 보니 serverStatus키와 값 2가 존재함
      if (r.status === 200) {
        this.$refs.btnClose.click()
        this.$swal('카테고리 정보가 저장되었습니다.')
        this.getList()
      }
    }
  })
},

 

[그림 1] status 키가 없다.

 

문제의 원인은 DB 데이터를 수정하는 put함수의 리턴 값에 붙은 .data 때문이었다. 

async $put(url, data) {
  return (
    await axios.put(url, data).catch((e) => {
      console.log(e)
    })
  ).data
},

 

다음과 같이 코드를 수정하니 [그림 2]와 같이 status 키와 값이 넘어왔다.

async $put(url, data) {
  return await axios.put(url, data).catch((e) => {
    console.log(e)
  })
},

 

[그림 2] status키와 값 200