[7/17] 로그인 axios post

axios post

axios.post(url, data, config);

url : 요청을 보낼 주소

data : 요청 본문을 실을 데이터 ({ email, password })

config : (선택) 요청 헤더, 인증 토큰 등 설정 

주의점

- POST 요청 시 데이터는 body에 담김

- 대부분 Content-Type: application/json 헤더가 필요함

- axios는 이걸 자동으로 설정해 줌

- 인증이 필요한 경우 headers를 세 번째 인자로 넘김

headers

서버에 보내는 부가 정보를 담음

 

Content-Type

- 요청 본문 데이터의 형식

- application/json

 

Authorization

- 인증 토큰, 세션 정보

- Bearer abc123token

 

Accept

- 서버에 기대하는 응답 형식

- application/json

 

X-Requested-With

- AJAX 요청임을 나타냄 (일부 서버에서 필요)

- XMLHttpRequest

 

Cache-Control

- 캐싱 정책 설정

- no-cache

 

Cookie

- 세션 쿠키 전송

- session_id=abc123

 

User-Agent

- 클라이언트 정보 (브라우저나 앱)

- MyApp/1.0.0

axios.poast(url, data, {
	headers: {
    	Authorization: `Bearer ${authToken}`,
        'Content-Type': 'application/json',
    }
});

axios.post(
	url,
    { name: '주형', age: 25 },
    {
    	headers: {
        	'Authorization': 'Bearer token',
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-Custom-Header': 'my-custom-value',
        }
    }
);

 

instance로 공통 headers 설정 가능

const instance = axios.create({
	baseURL: '/',
    headers: {
    	Authorization: `Bearer ${localStorage.getItem('authToken')}`,
        'Content-Type': 'application/json'.
    }
});

 

---

로그인 api를 구현해야 한다. 

get 방식은 익숙해졌는데 post는 써본 적이 없어서 어떻게 쓸지 감도 안 잡힌다.

일단 gpt가 알려주는 대로 적어보기로 한다. 

import { LOGIN_URL } from './api';
import axios from 'axios';

interface LoginRequest {
  email: string;
  password: string;
}

interface LoginResponse {
  data: {
    email: string;
    name: string;
    authToken: string;
  }
}

export const login = async (params: LoginRequest) => {
  try {
    const res = await axios.post<LoginResponse>(LOGIN_URL, params);
    return res.data;
  } catch (error) {
    console.error('로그인 오류:', error.response?.data);
    throw new Error(error.response?.data?.message || '로그인 중 오류가 발생했습니다.');
  }
}

export const login = async (params: LoginRequest) => {...}

- params는 사용자 입력 값(email, password)을 받음

try {
	const res = await axios.post<LoginResponse>(LOGION_URL, params);
 	return res.data;
}

- url에 params를 POST 요청으로 전송 

catch (error) {
	const err = error as AxiosError<{ message: string }>;
    throw new Error(err.response?.data?.data?.message || '로그인 중 오류가 발생했습니다.');
}

- 요청 실패 시 error를 AxiosError로 타입 단언

- 호출한 곳에서 try-catch로 잡을 수 있도록 예외 던짐

---

AxiosError란?

- HTTP 요청을 보낼 때 문제가 생기면 던져지는 예외 에러 객체

try {
	const res = await axios.get(url);
} catch (error) {
	const err = error as AxiosError;
    
    console.log(err.message); // 일반 에러 메시지
    console.log(err.code); // ex) ERR_NETWORK
    console.log(err.response?.status); // HTTP 상태 코드 (404, 500)
    console.log(err.response?.data); // 서버에서 보낸 에러 데이터
}

---

api에 데이터를 요청할 때는 

try {
      const res = await login({ email, password });
      saveUserInfo(res.data);

      const fallback = location.state?.from || '/';
      navigate(fallback);
    } catch (error) {
      toast.error(error.message);
    }

const orderData = {
  productId: product.id,
  message: textMessage,
  messageCardId: String(messageCardId),
  ordererName: senderName,
  receivers: submittedRef.current.map(({ name, phone, count }) => ({
    name,
    phoneNumber: phone,
    quantity: Number(count),
  })),
}

try {
  const result = await order(orderData);
  if (result.data?.success) {
    toast(renderOrderSuccessToast(product.name, count, senderName, textMessage), {
      type: 'success',
      autoClose: 3000,
      style: { width: '400px' },
    });
    navigate('/');
  }
} catch (error) {
  toast.error(error.message || '주문 중 오류가 발생했습니다.');
}

데이터를 설정하고 넣어주어야 한다.