axios

React에서 fetch대신에 사용할수있는 좋은것을 발견했다. 그것은 바로 Axios이다.
우선, axios에대해 알아보자

Axios

---

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 라고한다.

특징

• 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
• Promise(ES6) API 사용
• 요청과 응답 데이터의 변형
• HTTP 요청 취소
• HTTP 요청과 응답을 JSON 형태로 자동 변경

source:https://velog.io/@zofqofhtltm8015/Axios-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%84%9C%EB%B2%84-%ED%86%B5%EC%8B%A0-%ED%95%B4%EB%B3%B4%EA%B8%B0

설치

axios를 사용하기위해서는 설치를 먼저해야한다.

$ npm i axios

실행 GET

axios.get("url,[,config]")	

GET : 입력한 url에 존재하는 자원에 요청

이렇게하면 Data를 얻을수있다, 하지만 잡을수가 없기에 변수를 설정해야한다. 한번해보자

const axi = axios.get("url")
//axios는 살짝 느리다. async와 await를 잘활용해서 문제를 해결해보자.

자세한 코드

const axios = require('axios');

// ID로 사용자 요청
axios.get('/user?ID=12345')
  // 응답(성공)
  .then(function (response) {
    console.log(response);
  })
  // 응답(실패)
  .catch(function (error) {
    console.log(error);
  })
  // 응답(항상 실행)
  .then(function () {
    // ...
  });

async 함수처리시

async/await를 사용할 경우 함수 또는 메서드 앞에 async 키워드를 사용한다.
내부에는 async 키워드를 사용해 비동기 통신 요청을 처리하고, async/await는 오류 디버깅을 위해 try...catch 구문을 사용할수있다.

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

resource:https://xn--xy1bk56a.run/axios/guide/usage.html#get-%EC%9A%94%EC%B2%AD

POST, PUT, DELETE는 다음에 알아보도록 하자.