Axios in을 사용하여 API와 통신 React- 단계별 가이드

애플리케이션 에서 React API와 상호 작용하는 것은 일반적인 요구 사항입니다. HTTP 요청을 만들고 응답을 처리하는 프로세스를 단순화하는 Axios 인기 있는 라이브러리입니다. JavaScript 이 단계별 가이드는 애플리케이션 Axios 에서 React API를 사용하여 통신하는 과정을 안내합니다.

 

설치 중 Axios

터미널에서 프로젝트 폴더를 열고 다음 명령을 실행하여 설치합니다 Axios. npm install axios

다음 코드를 사용하여 구성 요소를 Axios 가져 옵니다. React import axios from 'axios'

 

GET 요청 보내기

요청 을 보내고 GET API에서 데이터를 가져오려면 메서드를 사용합니다. axios.get()

예:

axios.get('https://api.example.com/data')  
  .then(response => {  
    // Handle the response data  
    console.log(response.data);  
  })  
  .catch(error => {  
    // Handle any errors  
    console.error(error);  
  });  

 

POST 요청 보내기

요청 을 보내고 POST API에 데이터를 보내려면 메서드를 사용합니다. axios.post()

예:

axios.post('https://api.example.com/data', { name: 'John', age: 25 })  
  .then(response => {  
    // Handle the response data  
    console.log(response.data);  
  })  
  .catch(error => {  
    // Handle any errors  
    console.error(error);  
  });  

 

오류 처리

Axios 메서드를 사용하여 기본 제공 오류 처리 메커니즘을 제공합니다 catch().

예:

axios.get('https://api.example.com/data')  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    // Handle the error  
    if(error.response) {  
      // The request was made, but the server responded with an error status code  
      console.error(error.response.data);  
    } else if(error.request) {  
      // The request was made but no response was received  
      console.error(error.request);  
    } else {  
      // Something else happened while setting up the request  
      console.error(error.message);  
    }  
  });  

 

RESTful API와 통합

Axios GET, POST PUT 및 DELETE 와 같은 HTTP 메서드를 지정할 수 있도록 하여 RESTful API를 지원합니다 .

예:

// GET request with query parameters
axios.get('https://api.example.com/data', { params: { page: 1, limit: 10 } })  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  
  
// POST request with data
axios.post('https://api.example.com/data', { name: 'John', age: 25 })  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  
  
// PUT request to update existing data  
axios.put('https://api.example.com/data/1', { name: 'John Doe' })  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  
  
// DELETE request to remove data  
axios.delete('https://api.example.com/data/1')  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  

 

Axios 이러한 단계와 예제를 따르면 애플리케이션 에서 사용하는 API와 효과적으로 통신할 수 있습니다 React.