🔑잠은 죽어서 자자
💡 Axios에서 GET, POST
📃 axios는 JavaScript 환경에서 서버와의 HTTP 요청 및 응답을 처리하는 데 널리 사용되는 Promise 기반의 HTTP 클라이언트 라이브러리입니다
💻Get request
axios.get("https://jsonplaceholder.typicode.com/posts")
.then(res => {
console.log(res.data) // 성공적으로 받은 데이터
})
.catch(err => {
console.log(err) // 에러 처리
})⬆️ GET 메서드는 데이터를 요청할 URL을 입력한 뒤, .then을 통해 서버에서 받아온 데이터를 처리하거나, .catch를 통해 에러를 처리합니다
💻Post request
axios.post("https://jsonplaceholder.typicode.com/posts", {
title: "axios post test",
body: "axios is fun!!"
})
.then(res => {
console.log(res.data)
})
.catch(err => {
console.log(err)
})⬆️ POST 메서드는 데이터를 전송할 URL을 입력하고, 전송할 데이터 객체를 함께 전달합니다. 요청이 성공하면 서버에서 응답받은 데이터를 .then 콜백 함수로 처리할 수 있으며, 에러 발생 시 .catch로 에러를 처리할 수 있습니다.
💡 Interceptor 전처리 후처리
📃 Axios에는 Interceptors라는 개념이 있습니다. Interceptors는 이름 그대로 HTTP 요청과 응답을 가로챌 수 있는 기능입니다. 이 가로챈 요청이나 응답에서 무엇을 할 수 있을까요? 바로 전처리와 후처리를 할 수 있습니다.
📃 그렇다면 왜 요청이나 응답을 가로채야 할까요? 그냥 그대로 보내면 안 될까요?
📃 이 개념을 좀 더 쉽게 이해하려면, 우리가 GitHub Actions를 통해 배포를 자동화하는 것과 비슷한 개념이라고 볼 수 있습니다. GitHub Actions에서는 코드가 특정 조건을 만족할 때마다 자동으로 작업을 실행할 수 있도록 설정합니다. 자동화 스크립트를 작성해두죠?? 예를 들어, 코드가 변경되면 자동으로 테스트를 실행하고, 그 후에 배포를 진행하는 것처럼 말이죠. 이 과정에서 중간에 특정 작업을 "가로채서" 처리하는 단계가 있습니다. 즉, 코드가 변경되면 "배포"라는 요청이 자동으로 트리거되고, 그 전에 테스트가 먼저 실행되는 식입니다.
💻 요청(Request) 전처리
axios.interceptors.request.use(
(config) => {
// 모든 요청에 인증 토큰 추가
const token = 'your-auth-token';
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
console.log('Request sent:', config);
return config; // 수정한 config 반환
},
(error) => {
// 요청 전 에러 처리
console.error('Request error:', error);
return Promise.reject(error);
}
);⬆️ 서버에 인증이 필요한 요청에서, 우리는 매번 HTTP 헤더에 인증 토큰을 추가해서 보낼 수가 없습니다. 이때 Interceptors를 사용하면 모든 요청에 자동으로 헤더를 추가할 수 있습니다
💻 음답(Request) 후처리
// 응답 인터셉터 추가
axios.interceptors.response.use(
(response) => {
// 응답 데이터 구조 간소화
console.log('Response received:', response);
return response.data; // 필요한 데이터만 반환
},
(error) => {
// 공통 에러 처리
if (error.response.status === 401) {
console.error('Unauthorized! Redirecting to login...');
// 예: 로그인 페이지로 이동
window.location.href = '/login';
}
return Promise.reject(error);
}
);