ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • React ajax 라이브러리
    front-end/React 2024. 4. 22. 15:11
    728x90

    1. ajax 라이브러리 설치

    npm install axios

     

    2. ajax 요청 방법

    • get 방식
    axios.get('서버주소')
      .then(response => {
        // 서버로부터 데이터를 성공적으로 받았을 때 실행
        console.log('GET 요청 성공!');
        console.log('데이터:', response.data);
      })
      .catch(error => {
        // 요청이 실패했을 때 실행
        console.error('GET 요청 실패:', error);
      });

     

    • post 방식
    axios.post('주소값', {
        title: '타이틀',
        body: '바디',
        userId: 1
      })
      .then(response => {
        // POST 요청이 성공했을 때 실행
        console.log('POST 요청 성공!');
        console.log('응답 데이터:', response.data);
      })
      .catch(error => {
        // 요청이 실패했을 때 실행
        console.error('POST 요청 실패:', error);
      });

     

    • put 요청
    axios.put('주소값', {
        id: 1,
        title: '타이플',
        body: '바디',
        userId: 1
      })
      .then(response => {
        // PUT 요청이 성공했을 때 실행
        console.log('PUT 요청 성공!');
        console.log('응답 데이터:', response.data);
      })
      .catch(error => {
        // 요청이 실패했을 때 실행
        console.error('PUT 요청 실패:', error);
      });

     

    • delete 요청
    axios.delete('주소값')
      .then(response => {
        // DELETE 요청이 성공했을 때 실행
        console.log('DELETE 요청 성공!');
        console.log('응답 데이터:', response.data);
      })
      .catch(error => {
        // 요청이 실패했을 때 실행
        console.error('DELETE 요청 실패:', error);
      });
    728x90

    'front-end > React' 카테고리의 다른 글

    classNames으로 module.css 사용하기  (0) 2024.06.26
    React useEffect 정리  (0) 2024.04.22
    React styled-components 라이브러리  (0) 2024.04.22
    React Outlet 기능을 알아보자  (0) 2024.04.18
    React data import export 방법  (0) 2024.04.18
Designed by Tistory.