본문 바로가기
코딩/React

axios request, response

by junhub 2023. 5. 8.

# request

 

Axios를 사용하여 HTTP 요청을 보내고 원하는 데이터를 서버에 전달하는 방법은 다음과 같다. 

 

1. axios.post() 메소드를 사용하여 HTTP POST 요청을 보낸다. 이때, 첫 번째 매개변수로 요청을 보낼 URL을 전달하고, 두 번째 매개변수로는 보낼 데이터를 전달한다.

axios.post('/api/data', {
  key1: 'value1',
  key2: 'value2'
})

 

2. HTTP POST 요청의 본문에 포함될 데이터는 두 번째 매개변수로 전달한다. 데이터는 객체 형태로 전달하며, 객체의 프로퍼티 이름이 데이터의 키(key)가 되고, 프로퍼티 값이 데이터의 값(value)이 된다.

 

3. 만약, 데이터를 JSON 형식으로 보내고 싶다면, Content-Type 헤더를 application/json으로 설정해야 한다. 이때, axios.post() 메소드의 세 번째 매개변수로 headers 객체를 전달한다.

axios.post('/api/data', {
  key1: 'value1',
  key2: 'value2'
}, {
  headers: {
    'Content-Type': 'application/json'
  }
})

 

 

4. axios.post() 메소드는 Promise 객체를 반환한다. 이를 사용하여 서버의 응답을 처리한다. 

axios.post('/api/data', {
  key1: 'value1',
  key2: 'value2'
}, {
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

 

위 코드에서 then() 메소드는 서버에서 반환된 응답을 처리한다. catch() 메소드는 요청에 실패한 경우 에러를 처리한다.

 

이와 같은 방법으로 axios를 사용하여 HTTP POST 요청을 보내고, 원하는 데이터를 서버에 전달할 수 있다. 

 

 


# response 

 

1. axios를 사용하여 HTTP 요청 보내기: axios.get(), axios.post() 등의 메소드를 사용하여 서버로 HTTP 요청을 보낸다.

요청을 보내기 위해서는 요청할 URL을 지정해야 한다. 예를 들어, GET 요청을 보내는 경우 다음과 같이 작성할 수 있다.

axios.get('https://example.com/api/data')

 

2. HTTP 응답 받기: axios.get(), axios.post() 등의 메소드는 Promise 객체를 반환한다. 따라서, then() 메소드를 사용하여 서버로부터 받은 HTTP 응답을 처리할 수 있다. 예를 들어, 다음과 같이 작성할 수 있다.

axios.get('https://example.com/api/data')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

위 예제에서, then() 메소드는 서버로부터 받은 응답을 처리하기 위해 사용된다. 받은 응답을 콘솔에 출력하는 예제이다.

또한, catch() 메소드를 사용하여 요청에 실패한 경우 에러를 처리할 수 있다.

'코딩 > React' 카테고리의 다른 글

인증/인가(쿠키, 세션, 토큰, JWT)  (0) 2023.05.01
throttling & debouncing  (0) 2023.05.01
React Query  (0) 2023.04.29
Custom Hooks  (0) 2023.04.29
Thunk 2  (0) 2023.04.29

댓글