[큐시즘] 파트크로스스터디 준비

9/9 토 part cross study

• 이번 스터디의 목적
  기업 프로젝트, 협업 프로젝트 등 프로젝트에 앞서서 백엔드와의 협업에 필요한 사항을 준비하는 것.

Axios - HTTP 클라이언트 라이브러리

Axios는 웹 개발에서 널리 사용되는 HTTP 클라이언트 라이브러리이다.
Axios는 Promise기반으로 동작하기 때문에 간결한 비동기 코드 작성이 가능하다.

주요 특징을 알아보자

• 프로미스 기반
  Axios 는 Promise를 반환하기 때문에 '.then()'과 'catch()'를 사용하여 비동기 처리를 할 수 있으며, 'async/await' 문법과 같이 사용하여 더욱 간결한 비동기 코드를 작성할 수 있다.

• 브라우저와 Node.js에서 동작
  Axios는 브라우저 뿐만 아니라 Node.js 환경에서도 동작한다. 그러니, 클라이언트, 서버 양쪽 모두에서 사용가능하다.

• 요청과 응답의 변형
  요청 전에 데이터를 수정하거나, 응답이 도착했을 때 데이터를 변형하는 것이 가능하다.

• 취소 가능한 요청
  Axios는 요청을 취소하는 기능을 제공한다

• 응답시간 제한
  특정 시간 이내에 응답이 오지 않으면 요청이 실패한 것으로 간주하는 시간 제한 기능을 제공한다.

• JSON데이터 자동 변환
  Axios는 기본적으로 JSON 데이터의 자동변환을 지원한다.

기본 사용법 - Promise 방식

import axios from 'axios';

// GET 요청
axios.get('/api/data').then( response => {
	console.log(response.data);
}).catch( error => {
	console.log(`Error fetching data ${error}`);
});

// POST 요청
axios.post('/api/data, {
	param1: 'value1',
    param2: 'value2'
}).then( response => {
	console.log(response.data); 
}).catch( error => {
	console.log(`Error sending data ${error}`;
});

기본 사용법 - Async/Await 방식

import axios from 'axios';

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

fetchData();

Axios 인스턴스 생성

const instance = axios.create({
	baseURL: 'https://api.example.com',
    timeout: 1000,
    headers: {'Authorization': 'Bearer my-token'}
});

instance.get('/data').then( response => {
	console.log(response.data);
});