블로그를 읽기 전에! 개발할 때 API는 Springboot로 작업을 했고,
axios로 API에 post 요청을 보내서 view에 데이터 뿌리는 것에 대한 예제만 포스팅할 예정입니다.
axios란 ?
axios란, JavaScript 및 React 애플리케이션에서 HTTP 요청을 수행하는 데 사용되는 라이브러리 중 하나이다.
Promises를 기반으로 비동기적인 방식으로 HTTP 요청을 처리하며, fetch(또다른 HTTP 요청 수행 라이브러리)와는 달리
따로 설치 후 import 해주어야한다.
Node.js와 브라우저에서도 사용할 수 있다.
사용법
1️⃣ axios 설치
npm install axios
또는
yarn add axios
2️⃣ axios를 사용할 React 컴포넌트에서 import
import axios from 'axios';
axios 문법 구성
axios는 fetch처럼 객체 옵션을 다 추가해주는 방법 이외에 aliases라는 요청 단축 메소드가 제공된다.
원래 같았으면 1번과 같이 길게 적어야하는 코드를 2번처럼 함수형으로 재구성하여 작업이 가능하다.
1.
axios({
url: 'https://test/api/cafe/list/today', // 통신할 웹문서
method: 'get', // 통신할 방식
data: { // 인자로 보낼 데이터
foo: 'diary'
}
});
2.
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]])
각각의 메소드마다 설명이 다르지만, 이번 포스팅에는 axios.post만 다룰 예정이다.
axios POST
post 메서드에는 일반적으로 데이터를 Message Body에 포함시켜 보낸다.
문법 예시로서는 아래와 같다.
const axios = require(`axios`)
axios.post('url', {
// 파라미터 값
})
// 응답(성공)
.then(function(response){
console.log(response);
})
// 응답(실패)
.catch(function(error) {
console.log(error);
})
// 응답 (항상 실행)
.then(function(){
// ...
})
하지만 여기서 만약 async await를 사용하게 되면 더욱 간단해진다.
const function = async (e) => {
try{
const response = await axios.post('url', {
// 파라미터 값
});
console.log(response);
}
catch(error){
console.error(error);
}
}
async
- async 키워드는 함수의 앞에 붙어서 사용
- async를 사용하게 되면 항상 Promise 를 반환
- 만약 반환값이 Promise가 아니라면 이행상태의 Promise(Resolved Promise) 형태로 값을 감싸 반환
await
- await 키워드는 async 함수 안에서만 사용
- await를 만나게 되면 Promise가 처리될 때까지 대기
- await를 이용하게 된다면 콜백함수 처리 없이 비동기 처리
댓글