[feat] axios api

[eunznidang]

💥 axios get, post, delete, patch 만들었습니다 ..

1. 토큰 설정 (로그인 api 연결 전까진 이렇게 설정해야 함)

크롬 f12 -> application -> session storage의 localhost에 다음과 같이 추가 @dahxxn 제가 로그인 api 불러와서 토큰 설정까진 해뒀으니, 리프레시토큰 및 이후 로직 짜시면 됩니다 ~

2. 사용할 컴포넌트에서 ..

1. 사용할 함수 import import { getRequest } from './apiClient 경로'; : params 보낼 수 있는 get import { postRequest } from './apiClient 경로'; : body 보낼 수 있는 post import { putRequest } from './apiClient 경로'; import { patchRequest } from './apiClient 경로'; import { deleteRequest } from './apiClient 경로';

2. 이런식으로 요청하면 됨. 만들어둔 함수 외에 커스텀해서 사용하고 싶으면 apiClient사용하거나 함수 추가로 만들어서 사용하세요

    const fetchArticle = async () => {
        try { 
          const response = await getRequest('/api/article/select', { id: articleId }); 
        } catch (error) {
          setError('기사 정보를 불러오는 데 실패했습니다.');
        } 
    };

       const data={
            email: email,
            password: password
        }

        postRequest('/api/user/login', data)
            .then(response => {
                console.log(response.data);
                sessionStorage.setItem('authToken', response.data.accessToken);
                console.log('저장된 authToken:', sessionStorage.getItem('authToken'));
            })
            .catch(error => {
                console.error('Error fetching subscriptions:', error);
            });

[dahxxn]

헤더에 토큰 없이 사용할 apiClient 만들었습니다 (../../apis/noTokenAxios.jsx)

const noTokenFormDataApiClient = axios.create({
    baseURL: import.meta.env.VITE_API_URL,
});

// 아래는 formData를 넘기는 함수 
// POST 요청 
const postRequest = (url, formData) => {
    return noTokenFormDataApiClient.post(url, formData)
        .then(response => response) 
        .catch(error => {
            console.error('POST 요청 오류:', error);
            throw error;
        });
};