javaScript axios 사용하기

Axios란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트이다.
즉, http를 이용해 서버와 통신하기 위해 사용하는 패키지이다.

Promise: 자바스크립트 비동기 처리에 사용되는 객체
(비동기 처리란, 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 의미함)
Promise를 사용하면 비동기 메서드에서 동기 메서드처럼 값을 반환할 수 있으며, 다음 중 하나의 상태를 가진다.
대기(pending): 이행하지도, 거부하지도 않은 초기 상태
이행(fulfilled): 연산이 성공적으로 완료됨
거부(rejected): 연산이 실패함

 

https://axios-http.com/kr/

Axios

사용법
Axios 설치하기

yarn add axios
npm install axios

import axios from 'axios'

json-server 설정
별도의 배포는 필요하지 않고, 한 프로젝트 내에서 3001 포트 등으로  서버를 가동시켜 사용한다.

 

아래 사용 코드 중 config는 필수가 아니다.

Get 데이터 받아오기

axios.get(url,[,config])

Post 새로운 리소스 생성하기

axios.post("url주소",{
     data객체
    },[,config])

Delete 데이터 지우기

axios.delete(URL,[,config]);

* Delete 메서드는 서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에,
두 번째 인자는 아예 전달하지 않는다.

Put 데이터 수정하기

axios.put(url[, data[, config]])

* Put 메서드는 서버에 있는 데이버테이스의 내용을 변경하는 것을 주 목적으로 한다.

Axios로 서버와 통신하고 싶다면,
postman 등 가짜 웹서버를 사용해 통신시켜볼 수 있다.
https://www.postman.com/

Postman API Platform | Sign Up for Free

 

---

참조

https://axios-http.com/kr/

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

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란? / Axios 사용 및 서버 통신 해보기!