[React] 08. Fetch, Axios

Fetch

• 자바스크립트에서 HTTP 요청을 수행하는 인터페이스
• Fetch API는 모던 브라우저에 내장되어 있다
• Fetch는 Promise 기반으로 작동하며, .then()과 .catch() 메서드를 사용해 응답과 오류를 처리
• 응답 상태 코드를 확인하여 요청이 제대로 이루어졌는지 확인해야 한다
• fetch(url).then(response => response.json()).then(data => console.log(data));
• GET
  • .json() 메서드를 호출하여 응답을 JSON으로 파싱해야한다

const fetchUsers = async () => {
    try {
        const userListUrl = process.env.REACT_APP_USER_LIST_URL;
        const response = await fetch(userListUrl);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        const userData = data.content;
        setUsers(userData);
    } catch (error) {
        console.error('Error:', error);
    }
};
fetchUsers();
}, []);

HTTP 요청 메서드

HTTP 메서드	메서드	설명
get	GET	특정 URL의 리소스를 가져온다
post	POST	특정 URL에 데이터를 전송한다
put	PUT	특정 URL의 리소스를 업데이트한다
patch	PATCH	특정 URL의 리소스를 부분적으로 업데이트한다
delete	DELETE	특정 URL의 리소스를 삭제한다

Axios

• HTTP 클라이언트 라이브러리로, HTTP 통신을 단순화 한다
• Axios는 자동으로 HTTP 응답 상태 코드를 기반으로 오류를 자동으로 식별한다

const fetchUsers = async () => {
    try {
        const userListUrl = process.env.REACT_APP_USER_LIST_URL;
        const response = await axios.get(userListUrl);
        const userData = response.data.content;
        setUsers(userData);
    } catch (error) {
        console.error('Error:', error);
    }
};
fetchUsers();
}, []);

Axios 메서드

Params

• Params는 쿼리 파라미터를 설정하는 데 사용되며, 객체 형태로 제공되고 URL의 쿼리 문자열로 자동 변환된다

const search = async (params) => {  
  try {  
    const response = await api.get('/search', {  
      params: {  
        name: params.name,   
        fromCreatedAt: params.fromCreatedAt,  
        toCreatedAt: params.toCreatedAt,  
      },  
    });  
    return response.data;  
  } catch (error) {  
    console.log('error', error);  
  }  
};

Interceptor

• Axios 인터셉터는 요청이나 응답을 가로채 처리할 수 있는 기능을 제공한다

api.interceptors.request.use((config) => {  
  // 요청 설정을 수정하는 코드를 여기에 작성합니다.  
  const token = localStorage.getItem('token');  
  if (token) {  
    config.headers.Authorization = `Bearer ${token}`;  
  } else {  
    config.headers.Authorization = '';  
  }  
  return config;  
});