GET,POST,PUT,DELETE

Axios는 JavaScript에서 HTTP 요청을 처리하기 위한 인기 있는 라이브러리로, Fetch API보다 더 많은 기능과 편리한 문법을 제공

 

1. GET 요청: 데이터를 가져오는 요청

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.get('<https://api.themoviedb.org/3/movie/now_playing>', {
      params: {
        api_key: 'YOUR_API_KEY',
        language: 'ko-KR',
      },
    });

    console.log(response.data); // 가져온 데이터 출력

  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

// 함수 호출 (예시)
fetchData();

 

 

 

API 호출에서 쿼리 파라미터를 사용하는 두 가지 방법

 

1. URL에 직접 쿼리 파라미터 추가

URL에 직접 쿼리 파라미터를 추가하는 방법

const fetchPopularProjects = async () => {
  try {
    const response = await axios.get('/main/liked?feedType=PROJECT'); // API 호출

    // API 응답에서 받은 데이터 처리
    const projectsWithLikes = response.data.map(project => {
        // 추가적인 로직 처리
      };
    });

    return projectsWithLikes; // 처리된 프로젝트 데이터 반환
  } catch (error) {
    console.error('Error fetching popular projects:', error);
  }
};

const fetchPopularProjects = async (feedType) => {
  try {
    const response = await axios.get(`/main/liked?feedType=${feedType}`); // feedType을 매개변수로 사용
    // 추가적인 로직 처리
  } catch (error) {
    console.error('Error fetching popular projects:', error);
  }
};

 

 

2. params 객체 사용

params 객체를 사용하는 방법

const fetchPopularProjects = async () => {
  try {
    const response = await axios.get('/main/liked', {
      params: {
        feedType: 'PROJECT' // 쿼리 파라미터 추가
      }
    });

    // API 응답에서 받은 데이터 처리
    
      };
    });

    return projectsWithLikes; // 처리된 프로젝트 데이터 반환
  } catch (error) {
    console.error('Error fetching popular projects:', error);
  }
};

const fetchPopularProjects = async (feedType) => {
  try {
    const response = await axios.get('/main/liked', {
      params: {
        feedType: feedType // 쿼리 파라미터 추가
      }
    });

 

 

 

2. POST 요청: 서버에 데이터를 전송하는 요청

const data =  { key: 'value' }

const postData = async () => {
  try {
    const response = await axios.post('<https://example.com/api/data>', data, {
      headers: {
        'Content-Type': 'application/json', // JSON 형식으로 데이터 전송
      },
    });

    console.log(response.data); // 응답 데이터 출력

  } catch (error) {
    console.error('Error posting data:', error);
  }
};

• content-type
  1. 정의:
     • Content-Type은 HTTP 요청 또는 응답에서 전송되는 데이터의 형식을 지정하는 헤더
  2. 형식:
     • 데이터의 MIME 타입을 사용하여 형식을 정의.
     • 예:
       • application/json: JSON 데이터
       • text/html: HTML 문서
       • multipart/form-data: 파일 업로드 포함 폼 데이터

 

 

 

3. PUT 요청: 기존 데이터를 수정할 때 사용

const updateData = async (url = '', data = {}) => {
  try {
    const response = await axios.put(url, data, {
      headers: {
        'Content-Type': 'application/json',
      },
    });

    console.log(response.data); // 응답 데이터 출력

  } catch (error) {
    console.error('Error updating data:', error);
  }
};

// 사용 예시
updateData('<https://example.com/api/data/1>', { updatedKey: 'newValue' });

 

 

 

4. DELETE 요청: 서버에서 데이터를 삭제할 때 사용

const deleteData = async (url = '') => {
  try {
    await axios.delete(url);
    console.log('Data deleted successfully');

  } catch (error) {
    console.error('Error deleting data:', error);
  }
};

// 사용 예시
deleteData('<https://example.com/api/data/1>');

 

 

주요 특징

• 비동기 처리: Axios는 프로미스를 반환하며, async/await 구문을 사용하여 비동기적으로 작업할 수 있음.
• 응답 처리: Axios는 HTTP 오류를 자동으로 reject하므로, catch 블록에서 오류를 처리할 수 있음
• JSON 변환: Axios는 기본적으로 요청 본문을 JSON 형식으로 변환하고, 응답 데이터를 자동으로 JSON으로 파싱함
• 쿼리 파라미터 처리: params 옵션을 사용하여 GET 요청 시 쿼리 파라미터를 쉽게 추가할 수 있음