[TIL] AXIOS

 

 

🅰️ AXIOS

브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리

쉽게 말해, 백엔드와 프론트엔드가 효율적으로 통신을 하기 위해 Ajax와 더불어 사용하는 것이다

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

 

GET

axios.get(url,[,config])	

get 은 서버에서 데이터를 불러오거나 보여줄 때 사용하는 용도이다.
주소에 붙어있는 쿼리스트링으로 정보를 보여줄 때 이용하지 수정하거나, 삭제하거나 등의 용도로는 사용할 수 없다고 한다.

// 지정된 ID를 가진 유저에 대한 요청
axios.get('/user?ID=12345')
  .then(function (response) { // 화살표 함수도 가능
    // 성공 핸들링
    console.log(response);
  })
  .catch(function (error) {
    // 에러 핸들링
    console.log(error);
  })
  .then(function () {
    // 항상 실행되는 영역
  });


// 선택적으로 위의 요청은 다음과 같이 수행될 수 있습니다.
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // 항상 실행되는 영역
  });  

// async/await 사용을 원한다면, 함수 외부에 `async` 키워드를 추가하세요.
// 비동기 !!!! 
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

POST

axios.post("url주소",{
    	data객체
    },[,config])

post는 새로운 리소스를 생성할 때 사용된다.
post의 두 번째 인자(data객체)는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달

로그인, 회원가입 등 사용자가 생성한 파일을 서버에다가 업로드할때 사용Post를 사용하면 쿼리스트링이 남지 않기때문에 GET보다 안전하다고함!

axios.post('/user', { // 즉 보낼 데이터를 이 {} 안에 넣어주는 것
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

📩 POST를 이용해서 질문 업로드

const onSubmitQuestion = async (e) => {
    e.preventDefault(); // 이벤트의 기본기능을 막고 이 코드 먼저 실행
    await axios
      .post(
        'http://어쩌구저쩌구받아온주소/questions',
        {
          memberId: Userdata.id,
          title: title,
          content: content,
        },
        {
          headers: { authorization: localStorage.getItem('accessToken') }, // headers에 headers 객체 전달
        }
      )
      .then(() => {
     	alert('질문 등록 완료!')
        //Swal.fire({ (귀여운 알림창)
        //  text: '질문 등록 완료!',
        //  icon: 'success',
        });
        setTitle(null); // 실행 후 적었던 것 원상복귀
        setContent(null);
        navigate('/main'); // 메인페이지로 이동
      })
      .catch((e) => { // 오류 시 콘솔창에 띄움
        console.log(e);
      });
  };

return
...
	<button onClick={onSubmitQuestion}> 질문하기  </button>

 

DELETE

axios.delete(URL,[,config]);

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용
ㅅ서버에 있는 데이터베이스 내용을 삭제하는 기능이기 때문에 두번째 인자를 아예 전달하지 않는다.

🗑 delete로 질문 삭제 구현

const DeleteQuestion = async () => {
    await axios
      .delete(`http://~~주소/questions/${pageData.id}`, {
        id: pageData.id,
      })
      .then(() => {
        navigate('/main', { replace: true }); // 실행 후 메인으로 이동
      });
  };


return ...
 			{pageData.memberId ===
                Number(localStorage.getItem('UserId')) ? (
                  <QuDelete onClick={DeleteQuestion}>
                 	 Delete
				  </QuDelete>
                ) : (
                  ''
                )
			}

 

PUT

axios.put(url[, data[, config]])

데이터베이스에 저장되어 있는 내용을 갱신하는 목적으로 사용

axios.put('/user/12345', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})

 

PATCH

axios.patch(url[, data[, config]])

데이터의 전체가 아닌 일부 데이터만 수정하고 싶다면 patch를 이용할 수 있다.
patch는 넘겨준 데이터만 변경되고 기존 데이터는 유지된다.

✍🏻 patch로 질문 수정 구현

const modify = async (type, Id, title, content, answerId) => {
    const result = await axios
      .patch( // type이 질문, 답변 둘 중 하나
        type == 'questions'
          ? `http://~~주소:8080/${type}/${Id}`
          : `http://~~주소:8080/${type}/${answerId}`,
        type == 'questions'
          ? {
              Id,
              title,
              content,
            }
          : {
              id: answerId,
              questionId: Id,
              content,
            }
      )
      .then(() => {
        alert('수정 완료!')});
        init(questionId);
      });
    // 작동후 초기화하여 화면 업데이트
  };

return ...
		{pageData.editState == false ? (
              <QuEDContainer>
                <QuEdit
                  onClick={
                    pageData.memberId === Number(localStorage.getItem('UserId'))
                      ? OnclickEdit
                      : OnclickError
                  }
                >
                  Edit
                </QuEdit>