React 'axios' POST방식 request body,request header 에 데이터 담아 요청 보내기

 기존의 짜여져 있는 프로젝트 코드를 수정하던 중 post 로 요청을 받고 있지만 params 에서 일부 데이터를 가져오고 나머지는 request body 에서 또 플러스 알파로 필요하면 request header 에 필요한 정보 (인증이라 던지... 인증이라던지... 권한이라던지.. )를 추가해주는 것까지 한 번 간단히 사용법을 알아보자. 

 

 

https://github.com/axios/axios  <=  기본적인 사용법들, 문법들을 전체적으로 확인 할 수 있다. 

 

우선 axios 가 당연히 깔려 있어야 겠다. 깔려있지 않다면 

 

npm i axios

 

 

 

이제 이벤트가 발생 했거나 본인이 원할 때 한번 데이터를 전송해보자 

 

 

 

나 같은 경우에는 가격을 request body 에 상품의 암호화 되어 있는 id를 url에 , 인증토큰을 request header 에 담아서 넘겨줘야 했다.  (요청을 받는 백엔드 쪽 api가 그렇게 설정이 되어 있었당 ㅠㅠ);

 

 

const sendData = async() => {
	
    try
    const res = await axios.post(1,2,3);  
    catch(error)
      error

}

 

크게 요런 식으로 쓰게 될 텐데 1의 인자, 2의 인자, 3 의 인자에 어떤 것을 넣어주느냐에 따라 각각 원하는 데이터를 전달 할 수 있다. 

 

저기 1번 인자에는 주소를 , 2번인자에는 body 정보를, 3번쨰 인자에는 header 에 넣어줄 정보를 각각 넣어주면 된다. 

 

const sendData = async(Datum) => {
  const id = Datum._id;

  const headers = {
      'Content-Type' : 'application/json',
      'Authorization' : authToken
  }
  console.log(id);
  try {
      console.log(price);
    const res = await axios.post(`~~/${id}/place-deal`, {
        price : price    // price라는 이름의 객체에 price 변수에 담은 값 전달
    },{
        headers:headers // headers에 headers 객체 전달
    }
    )  
    console.log(res);
    setPrice(0); //  ~~

  } catch (error) {
      console.log(error);
  }
}

 

 

 

요런 식으로 해주고 개발자 도구에서 network 클릭해서 보게 되면 headers 에 우리가 넣어준 객체 값과 맨 밑에 body 에 넣어준 값들이 잘 나오는 것을 확인 할 수 있다.