axios 비동기 post 전송

react, next모두 비동기 처리가 필수입니다. xhr, fetch로도 가능하지만 오늘은 axios에서 json데이터를 전송하는 방식을 익혀볼까 합니다.

 

axios.post(url, formData, {
	headers: { "Content-Type": `application/json`}
    }
).then((res) => {
          console.log(res);
        });

 

post전송시 보내는 url, 데이터, req.header를 parameter로 넣어주면 됩니다.(get을 보낼시 데이터가 없을 경우 두번째 parameter를 null로 해주시면 됩니다.) 이때 여기서 주의해야할게 'formData' 형식입니다.

 

이미지, 영상들은 'event.target.files[0] '와 같이 파일을 넣고 header를 "Content-Type": `multipart/form-data;`"로 설정해줘야하고, json형식 텍스트는 json값을 "Content-Type": `application/json` 헤더와 함께 전송해줘야합니다.

약간의 팁으로 JSON.stringify(data)을 이용하면 json 포멧 데이터를 담을수 있습니다.

 

 let data = {
            id: id,
            pw: pw
        }
        axios
        .post(url,  JSON.stringify(data), {
          headers: {
            "Content-Type": `application/json`,
          },
        })
        .then((res) => {
          console.log(res);
        });

 

요약

 

이미지, 영상

=> data: 파일자체, header: Content-Type": `multipart/form-data

 

json텍스트

=> data:  JSON.stringify(data), header: Content-Type": `application/json