[RN] axios

저번에 axios 사용법을 공부했었는데 

이번에 마침 ! api 호출에서 조금 더 추가된 기능을 공부해야할 필요가 있었어서 아예 싹 다 정리해보고자 한다.

 

 

1. axios 란? 

axios는 브라우저와 Node.js 환경에서 사용 가능한 Promise 기반의 HTTP 클라이언트.

• 웹 애플리케이션에서 서버와의 통신을 단순화한다.
• RESTful API 와 상호작용할 때 유용하게 사용할 수 있다.
• 자동으로 JSON 데이터를 직렬화하거나 파싱해준다.
• 요청과 응답 전후에 특정 작업을 수행할 수 있다.
• node js 와 브라우저 모두에서 사용가능한 범용적인 HTTP 클라이언트이다. 

 

2. Axios와 Fetch의 차이점

기능	axios	fetch
데이터 형식	기본적으로 JSON 지원, 추가적인 설정 없이도 JSON 데이터를 쉽게 다룬다.	JSON 처리가 자동화되어있지 않아, 데이터를 직접 JSON.stringfy 하거나 response.json() 으로 처리해줘야 한다.
라이브러리 위치	외부 라이브러리를 다운받아야 한다.	브라우저 내장 API 라서 다운로드 없이 바로 사용가능하다
에러 핸들링	HTTP 상태 코드를 기반으로 한 에러 처리가 가능하다  4xx 또는 5xx 응답코드를 에러로 자동 처리한다.	기본적으로 HTTP 에러를 반환하지 않는다. 에러처리를 직접 구현해야 한다.
인터셉터	요청 및 응답 인터셉터를 제공한다.  -> 요청 전후에 특정 작업을 쉽게 처리할 수 있다.	인터셉터 기능을 기본적으로 제공하지 않는다.  -> 추가적인 코드 작성 필요

 

 

 

3. axios의 기본 사용법

• GET과 POST 를 나눠서 작성
• try- catch 로 오류처리 한다. 

/ POST

 

import axios from 'axios';

async function postData() {
  try {
    const data = { name: 'hihilong', position: 'front' };
    const response = await axios.post('https://api.hihilong.example.com/users', data);
    console.log(response.data);
  } catch (error) {
    console.error('Error posting data:', error);
  }
}

postData();

 

/GET

import axios from 'axios';

async function fetchData() {
  try {
    const response = await axios.get('https://api.hihilong.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

 

📌  try - catch 란?
-코드에서 발생할 수 있는 오류 처리하는 방법

-try 블록 안에는 오류가 발생할 수 있는 코드를 작성하고
-catch 블록 안에는 오류를 처리한다. catch 블록은 오류가 발생하지 않아 try 가 실행되지 않으면 실행되지 않으며, 오류가 발생할 경우 오류 객체 (error ) 를 받아 처리한다. 
예를들어 오류 메시지 출력 혹은 알림 대체 코드를 실행할 수 있다. 

 

 

** axios 로 API 요청을 보내면 이러한 응답을 받을 수 있다.

{
  "data": { /* 서버로부터 받은 실제 데이터 */ },
  "status": 200, // HTTP 상태 코드
  "statusText": "OK", // 상태 메시지
  "headers": { /* 응답 헤더들 */ },
  "config": { /* 요청 시의 설정들 */ },
  "request": { /* 원래의 요청 정보 */ }
}

 

 

4. axios 인스턴스 사용하기

만약 어플이 복잡해져서 호출하거나 이용해야할 api 가 많아져 기본 설정이 반복된다면 axios 인스턴스를 사용하여 기본 설정을 한번만 정의할 수 있다. 

axios 인스턴스는 axios.create() 메서드를 사용하여 생성된 axios 복제본이다.

 

-> 기본설정( 베이스 URL, 헤더, 타임아웃 등) 을 미리 정의하여 여러 곳에서 동일한 설정을 사용할 때 유용하다. 

-> 여러 api 를 사용할 때 각 api 에 대해 서로 다른 설정을 적용한 axios 인스턴스를 사용할 수 있다. (ex, 인증 서버와 데이터 서버에 서로 다른 인스턴스 사용 가능)

-> 인증 토큰이나 특정 api 키 등 모든 요청에 추가해야 할 때 인스턴스를 사용하여 헤더를 설정하면 매번 헤더를 지정할 필요가 없다. 

-> 모든 요청에 대해 공통적으로 수행해야 하는 작업을 쉽게 관리할 수 있다. 

.

// axios 인스턴스 생성
const apihihilong = axios.create({
  baseURL: 'https://api.hihilong.example.com/',
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' },
});

 

이렇게 apihihilong 이라느 axios 복제본을 만들었다. 그렇다면 얘를 어떻게 이용하냐~~

async function fetchData() {
  try {
    const response = await apihihilong.get('/data');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

 

이렇게 사용하면 기존에 계속 url 을 길게 입력할 필요없이 (따로 빼두었으니까) 오류처리만 하여 코드가 깔끔해진 것을 확인할 수 있다. 

이렇게 하여 코드가 반복적으로 사용해도 깔끔해보인담

 

5. axios 의 headers 옵션

-> 모든 HTTP 요청에 대해 기본적으로 포함될 HTTP 헤더를 정의한다. 

헤더는 클라이언트와 서버 간의 요청 및 응답에 대한 추가 정보를 전달하는 데 사용된다. 

여기서 headers 에 들어가는 값은 키-값 쌍의 형태로 요청 헤더를 지정한다. 

 

어떤 옵션들이 있을까??

(1) Content-Type

-> 요청 본문의 미디어 타입 지정

-> JSON 데이터를 applictation/ json 으로 설정해줌 

headers: { 'Content-Type': 'application/json' }

(2) Authorization

-> API 토큰이나 사용자 인증 정보 포함

-> 인증이 필요할 때 

-> HTTP 요청에서 클라이언트가 서버에 자신의 신원을 인증하기 위해 사용하는 중요한 요서

-> 이 헤더로 클라이언트가 서버에 "내가 누구인지" 증명할 수 있는 자격 증명 전달

// 1: Bears 방법
// 클라이언트는 서버로부터 받은 토큰을 사용
headers: { 'Authorization': 'Bearer your_token_here' }

// 2: Basic Authentication
// 클라이언트의 사용자 이름과 비밀번호를 Base64로 인코딩

headers: {'Authorization': `Basic ${token}`}

//3: api key
// API 요청마다 해당 키를 Authorization 헤더에 포함
headers: { 'Authorization': 'Api_key'}

 

(3)Accept

->서버로부터 응답을 받을 때 받을 수 있는 미디어 타입 지정

headers: { 'Accept': 'application/json' }

 

 

 

 

reference

https://www.tencentcloud.com/ko/document/product/436/13361

https://axios-http.com/docs/intro

https://axios-http.com/docs/instance

Getting Started | Axios Docs