Axios와 API 통신 — 네트워크 요청 패턴

npm install axios

import axios from 'axios';

// 기본 요청
const response = await axios.get('https://api.example.com/users');
console.log(response.data);

// POST 요청
const newUser = await axios.post('https://api.example.com/users', {
  name: '홍길동',
  email: 'hong@example.com',
});

// api/client.ts
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// 요청 인터셉터 — 토큰 자동 주입
apiClient.interceptors.request.use(
  async (config) => {
    const token = await AsyncStorage.getItem('accessToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// 응답 인터셉터 — 토큰 갱신, 에러 처리
apiClient.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;

    // 401 에러 시 토큰 갱신 시도
    if (error.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      try {
        const refreshToken = await AsyncStorage.getItem('refreshToken');
        const { data } = await axios.post('/auth/refresh', { refreshToken });
        await AsyncStorage.setItem('accessToken', data.accessToken);
        originalRequest.headers.Authorization = `Bearer ${data.accessToken}`;
        return apiClient(originalRequest);
      } catch (refreshError) {
        // 리프레시도 실패 → 로그아웃
        await AsyncStorage.multiRemove(['accessToken', 'refreshToken']);
        // 로그인 화면으로 이동
      }
    }

    return Promise.reject(error);
  }
);

export default apiClient;

// api/userApi.ts
import apiClient from './client';

export interface User {
  id: string;
  name: string;
  email: string;
  avatar: string;
}

export const userApi = {
  getAll: () =>
    apiClient.get<User[]>('/users').then((res) => res.data),

  getById: (id: string) =>
    apiClient.get<User>(`/users/${id}`).then((res) => res.data),

  create: (data: Omit<User, 'id'>) =>
    apiClient.post<User>('/users', data).then((res) => res.data),

  update: (id: string, data: Partial<User>) =>
    apiClient.put<User>(`/users/${id}`, data).then((res) => res.data),

  delete: (id: string) =>
    apiClient.delete(`/users/${id}`),
};

// 사용
const users = await userApi.getAll();
const user = await userApi.getById('123');

import axios, { AxiosError } from 'axios';

interface ApiError {
  message: string;
  code: string;
}

async function handleApiCall() {
  try {
    const data = await userApi.getAll();
    return data;
  } catch (error) {
    if (axios.isAxiosError(error)) {
      const axiosError = error as AxiosError<ApiError>;

      if (axiosError.response) {
        // 서버가 응답을 반환한 경우 (4xx, 5xx)
        const status = axiosError.response.status;
        const message = axiosError.response.data?.message;

        switch (status) {
          case 400: Alert.alert('오류', message || '잘못된 요청입니다'); break;
          case 403: Alert.alert('권한 오류', '접근 권한이 없습니다'); break;
          case 404: Alert.alert('오류', '데이터를 찾을 수 없습니다'); break;
          case 500: Alert.alert('서버 오류', '잠시 후 다시 시도해주세요'); break;
        }
      } else if (axiosError.request) {
        // 요청은 보냈지만 응답을 받지 못한 경우
        Alert.alert('네트워크 오류', '인터넷 연결을 확인해주세요');
      }
    }
    throw error;
  }
}

import { useEffect, useRef } from 'react';
import axios from 'axios';

function SearchScreen() {
  const abortControllerRef = useRef<AbortController>();

  const search = async (query: string) => {
    // 이전 요청 취소
    abortControllerRef.current?.abort();
    abortControllerRef.current = new AbortController();

    try {
      const { data } = await apiClient.get('/search', {
        params: { q: query },
        signal: abortControllerRef.current.signal,
      });
      setResults(data);
    } catch (error) {
      if (!axios.isCancel(error)) {
        console.error('검색 에러:', error);
      }
    }
  };

  // 컴포넌트 언마운트 시 취소
  useEffect(() => {
    return () => abortControllerRef.current?.abort();
  }, []);

  return <TextInput onChangeText={search} placeholder="검색..." />;
}

async function uploadImage(uri: string) {
  const formData = new FormData();

  formData.append('image', {
    uri,
    type: 'image/jpeg',
    name: 'photo.jpg',
  } as any);

  const response = await apiClient.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
    // 업로드 진행률
    onUploadProgress: (progressEvent) => {
      const percent = Math.round(
        (progressEvent.loaded * 100) / (progressEvent.total ?? 1)
      );
      console.log(`업로드: ${percent}%`);
    },
  });

  return response.data.url;
}