항해99 Week I Learn - week05

Axios 

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

백엔드와 프론트엔드 통신을 쉽게 하기 위해서 Ajax와 더불어 사용한다.

 

Axios 특징

• 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용
• Promise(ES6) API 사용
• 요청 및 응답 인터셉트
• HTTP 요청 취소
• HTTP 요청과 응답을 JSON 형태로 자동 변경
• XSRF를 막기위한 클라이언트 사이드 지원

 

axios vs fetch

axios	fetch
써드파티 라이브러리로 설치가 필요	현대 브라우저에 빌트인이라 설치 필요 없음
XSRF 보호를 해준다	별도 보호 없음
data 속성을 사용	body 속성을 사용
data는 object를 포함한다	body는 문자열화 되어있다
status가 200이고 statusText가 ‘OK’이면 성공이다	응답객체가 ok 속성을 포함하면 성공이다
자동으로 JSON데이터 형식으로 변환된다	.json()메서드를 사용해야 한다.
요청을 취소할 수 있고 타임아웃을 걸 수 있다	해당 기능 존재 하지않음
HTTP 요청을 가로챌수 있음	기본적으로 제공하지 않음
download진행에 대해 기본적인 지원을 함	지원하지 않음
좀더 많은 브라우저에 지원됨	Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원

Axios 문법

axios({
  url: 'http://localhost:3000', // 통신할 웹문서
  method: 'get', // 통신 방식
  data: { // 보낼 데이터
    foo: 'hi'
  }
})

axios 단축 메소드

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

https://velog.io/@devmag/Axios-%EC%84%A4%EC%B9%98-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC

Axios 설치 & 문법 정리

https://koras02.tistory.com/48

React | Axios란? (feat. Fetch API)

 

 

주특기 심화 주차는 혼자여서 힘들었는데 미니 프로젝트를 시작하면서 혼자 하는 과제가 아니기 때문에 계속 꾸준히 하는 상황이라서 더 열심히 하는 중. 단순히 연결하는 게 아니라 success나 error 관련해서도 더 찾아서 익혀야 한다.