[7/16] Axios

- 브라우저와 Node.js 환경에서 사용할 수 있는 비동기 HTTP 클라이언트

- HTTP 요청(GET, POST)을 보내고, 응답을 받아오는 역할을 Promise 기반으로 쉽게 처리

브라우저 & Node.js 지원

- 클라이언트, 서버 양쪽에서 동일하게 사용 가능 

Promise 기반

- .then(), .catch() 또는 async/await 지원 

자동 JSON 처리

- 요청 시 자동 stringify, 응답 시 자동 JSON 파싱 

요청/응답 인터셉터

- 요청 전에 토큰 추가, 응답 후 전처리 등 가능 

요청 취소

- AbortContoller 없이도 쉽게 요청 취소 가능 

응답 시간 제한 설정

- 타임아웃 기능 제공 

요청 헤더 설정

- headers 옵션으로 토큰, Content-Type 설정 가능 

GET 요청

axios.get(url)
	.then(response => {
    	console.log(response.data);
    })
    .catch(error => {
    	console.error(error.message);
    });

async/await로 GET 요청

async function fetchPost() {
	try {
    	const res = await axios.get(url);
        console.log(res.data);
    } catch (err) {
    	console.error(err);
    }
}

POST 요청

axios.post(url, {
	title: 'asdf',
    body: 'asdf',
    userId: 1
}).then(res => {
	console.log('생성된 데이터:', res.data);
});

요청 헤더 설정

axios.get('/user', {
	headers: {
    	Authorization: `Bearer ${token}`,
        'Content-Type': 'application/json'
    }
});

axios.get('/user', {...})

- GET 요청을 /user 경로로 보냄

- 두 번째 인자로 요청 옵셕 객체 전달 가능

 

Authorization: Bearer ${token}

- API 요청 시 인증 토큰 보내는 헤더

- 대부분의 인증에서 Bearer 토큰 방식 사용

- 서버에 로그인된 사용자만 접근 가능한 /user 같은 엔드 포인트에 요청할 때 필요

- token은 JWT(JSON Web Token)

 

'Content-Type': 'application/json'

- 보내는 데이터 타입이 JSON임을 알리는 헤더 

- POST, PUT 요청 시 본문 타입을 명시할 때 사용

 

언제 헤더 직접 설정

- 로그인 후 토큰을 헤더에 실을 때

- 서버에서 Content-Type, Accept 등 특정 헤더를 요구할 때

- CORS 요청에서 특정 헤더를 붙여야 할 때

const token = localStorage.getItem('token');

axios.post('/user/Info', { name: '홍길동' }, {
	headers : {
    	Authorization: `Bearer ${token}`,
        'Content-Type': 'application/json'
    }
});

name: '홍길동' 데이터를 JSON으로 보내며, 인증 토큰도 함께 전송 

요청/응답 인터셉터

요청 또는 응답이 실제로 처리되기 전후에 가로채기

axios.interceptors.request.use(...): 요청 인터셉터 - 요청 보내기 전 실행

axios.interceptors.response.use(...): 응답 인터셉터 - 응답 받은 직후 실행 

공통처리가 필요할 때 유용

- 모든 요청에 인증 토큰 추가

- 401 에러 발생 시 자동 로그아웃

- 응답 데이터를 통일된 형태로 가공

// 요청 인터셉터
axios.interceptors.request.use(config => {
	config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
});

작동 방식

- 모든 Axios 요청을 보내기 직전 실행됨

- config는 요청 정보 담고 있음 (요청 URL, method, headers 등)

 

하는 일

- 요청 헤더(config.headers)에 Authorization 값 추가

- 매 요청마다 자동으로 토큰을 헤더에 추가 

- 개별 요청마다 헤더 설정 안 해도 됨 

// 응답 인터셉터
axios.interceptors.response.use(
	response => response, // 성공 응답은 그대로 통과 
    error => {
    	if (error.response.status === 401) {
        	alert('로그인이 필요합니다');
        }
        return Promise.reject(error); // 에러를 그대로 throw
    }
);

작동 방식

- 서버에서 응답을 받은 직후 실행됨

- 성공한 응답은 response => response로 그대로 넘김

- 실패 응답은 두 번째 콜백에서 처리 

 

하는 일

- 401 에러 시, 로그인 안내 팝업 띄움

- 에러를 throw하여 처리 

요청 취소하기

- 검색창에 빠르게 여러 번 입력될 때, 이전 요청은 취소하고 마지막 요청만 유지

- 페이지 이동 시 불필요한 요청 제거

- 리소스를 절약하거나 중복 처리 방지 

AbortController

- 브라우저 내장 API

- fetch나 axios 같은 비동기 요청을 취소할 수 있게 도와주는 객체

- signal 객체를 요청에 전달하면, 나중에 .abort()로 해당 요청을 중단할 수 있음 

const controller = new AbortController();

axios.get('/data', {
	signal: controller.signal
}).catch(err => {
	if (axios.isCancel(err)) {
    	console.log('요청이 취소되었습니다.');
    }
});

controller.abort();

const controller = new AbortController();

- 요청을 제어할 컨트롤러 생성

- controller.signal을 통해 취소 가능한 요청 객체를 생성 가능 

axios.get('/data', {
	signal: controller.signal
}).catch(error => {
	if (axios.isCancle(error)) {
    	console.log("cancle");
    }
});

- /data 요청을 보냄

- 요청은 controller.signal에 의해 취소될 수 있음

- 요청이 취소되면 .catch()로 이동

- axios.isCancle(error)로 취소된 요청인지 판단

// 나중에 취소하고 싶을 때
controller.abort();

- 이 시점에 해당 요청을 중단시킴

- .catch()로 떨어짐