반응형 axios5 Axios에서 Config 객체를 활용한 적절한 HTTP 요청 방법 Axios에서는 요청을 보낼 때 config 객체를 활용하여 URL, HTTP 메서드, 헤더, 파라미터 등을 설정할 수 있다.1. GET 요청 - @RequestParam 및 @PathVariable 사용GET 요청은 데이터를 가져오는 용도로 사용되며, 본문(RequestBody)을 포함할 수 없다.Spring Boot에서 사용할 수 있는 어노테이션:@RequestParam: 쿼리 파라미터를 받아서 처리 (ex: ?name=Alice&role=admin)@PathVariable: URL 경로의 변수를 받아서 처리 (ex: /users/1)@RequestBody 사용 불가: GET 요청은 본문을 가지지 않기 때문import interceptor from '@/service/plugins/intercepto.. 2025. 2. 5. axios의 .catch()와 .finally() 메서드 .catch().then()은 http 요청이 성공했을 때 수행되는 메서드반면, catch()는 실패 했을 때 수행하는 메서드이다..finally()HTTP 요청 성공, 실패 여부와는 상관없이 무조건 실행되는 메서드이 메서드는 인자로 콜백 함수를 받으며, 해당 콜백 함수는 어떠한 매개변수도 전달받지 않는다..catch() 활용 예제 button1 요청 실패한 경우, 상태코드를 받아오고 그에 따른 작업 수행 예제 function ajax3() { axios.get("/main39/sub2") .catch(function (error) { // 상태 코드 400으로 가정 console.log(error); // 실패.. 2023. 10. 26. axios의 .then() 메서드 .then() 메서드 (HTTP 요청이 성공한 경우 호출되는 메서드).then()은 axios의 요청 메서드가 성공적으로 완료되었을 때 실행될 콜백 함수를 등록하는데 사용된다.즉, http 요청이 완료된 후에 수행할 추가 작업을 .then() 메서드로 수행한다..then() 메서드의 로직이 다 수행되고, 이 메서드에서 또 다시 Promise 객체를 반환한다. (연속적으로 추가적인 작업을 수행하기 위해서)이 Promise에는 response객체를 포함하는데, response 객체에는 아래와 같은 여러 프로퍼티를 가지고 있다.data: 서버에서 반환한 데이터 (파싱된 json 객체)status : http 상태코드headers : http의 헤더 등등등이 있음.예시 코드 button2 .. 2023. 10. 26. axios (AJAX) AxiosAxios는 클라이언트 사이드에서 HTTP 요청을 할 때 비동기 처리를 지원하는 javaScript의 라이브러리이다. Axios는 Promise 기반으로 동작하며, HTTP 요청을 비동기로 쉽게 처리할 수 있도록 다양한 메서드를 제공한다. 또한, 진행중인 요청을 취소할 수 있도록 취소 토큰도 지원하며, JSON 형식의 문자열 데이터를 JavaScript Object형식으로 변환해주는 기능도 지원한다. Promise란?JavaScript(클라이언트 사이드)에서 비동기 작업을 다루기 위한 객체이다. axios에서는 http 요청을 비동기로 처리하기 위한 요청 메서드 (get, post, put, delete 등) 를 지원하며, 이 메서드는 Promise 객체를 반환한다. 이 Promise 객체.. 2023. 10. 26. AJAX (웹 비동기 기법) AJAX AJAX란? 웹 페이지에서 서버와 비동기식으로 데이터를 교환하거나 가져오기 위해 사용되는 클라이언트 측 웹 개발 기술이다. AJAX를 사용하면 페이지 전체를 새로고침하지 않아도 서버로부터 데이터를 받아와 웹페이지의 일부를 업데이트 할 수 있다. 특징AJAX 요청은 비동기식으로 처리되며, 서버로부터 응답을 기다리는 동안 다른 작업을 진행할 수 있다.전체 페이지를 새로고침 하지 않고도 필요한 데이터만 서버와 교환할 수 있어 트래픽을 줄이고 성능을 향상 시킨다. AJAX 종류1. XMLHttpRequest가장 기본적인 HTTP 요청 방식브라우저에서 제공하는 원시적인 API로, 다소 번거롭고 코드가 길어질 수 있음과거에 사용하던 방식.2. ajax jQeuryjQuery 라이브러리를 사용한 HTTP .. 2023. 10. 26. 이전 1 다음 반응형