(에러핸들링) axios body 값 설정

axios의 메소드를 사용하는 방식은 2가지이다.

우선 ES6 형태로 import 해주는 건 동일

import axios from 'axios';

 

그러나 주의 해야 하는 건 const ___ require 형태는 2가지 방식 중 한 가지만 적용되기 때문에

고민 타임 줄여주는 ES6 형태로 import 하자.

 

1) 기본 타입 axios({ })

 axios({
      url: 'https://localhost:4000/users/login',
      method: 'post',
      data: {        
        userId: this.state.username,
        password: this.state.password
      },
      withCredentials: true
    })

axios 모듈 안에 객체로 필요한 정보들을 넣어 준다.

특히 data라고 명명한 부분은 HTTP 통신의 body값에 해당한다.

시도해 본 결과 굳이 data라고 객체의 키이름을 지정해주지 않고(키 이름을 빼고 넣어도) 된다.

 

2) 닷.메소드 타입 axios.post

제일 많이 쓰이는데 사실 코드 가독성이 떨어져서 개인적으로 선호하지 않는다.

    const payload = { 
        userId: this.state.username, 
        password: this.state.password
    }

    await axios( 'https://localhost:4000/users/login', payload, { withCredentials: true }

payload 부분이 바로 HTTP의 body 부분인데 구글링하면 복잡하게 객체값 넣어 놓은 코드가 많다.

아마도 axios 가이드에서 이렇게 기재되어 있어서 그런거 같다.

그나마 좀 괜찮은 사람들은 payload라고 이런식으로 변수 선언 할당해서 가독성을 높였다.

 

무엇을 선호하던 하이 클래스로 하자.

그리고 글은 어렵게 쓰는게 잘 쓰는게 아니라

남들이 볼 때 쉬워 보이게 쓰는게 잘 쓰는 것이다.

그러므로 1번 타입 기본 타입이 좋은 코드다.