Axios
Axios?
Axios는 Javascript 라이브러리 중 하나인 Fetch Api 와 같은 비동기 통신 라이브러리입니다.
React에서는 Axios를 더 많이 사용하는 경향이 있습니다.
Fetch와 Axios의 차이점은 Axios는 요청과 응답을 모두 JSON 형식으로 자동 변환시켜 줍니다. 또 Fetch의 Body 속성은 Axios 에서 Data 속성으로 사용되는데 stringfy() 되어 사용 됩니다.
Axios 사용법
기본 사용법
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 await를 같이 사용해서 좀 더 보기 좋게 쓰기도 한다.
async function getUser(){
try{
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch(error){
console.error(error);
}
}인스턴스를 하나 생성해서 axios 기본 세팅을 할 수도 있다.
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
headers: { 'X-Custom-Header': 'foobar'},
timeout: 1000,
});import axios from 'axios'
// agentkeepalive 모듈을 사용합니다.
// 노드JS 내장 모듈은 요청 대상의 IP 주소가 변경되었을 때 소켓이 서버를 찾지 못해 연결이 종료되는 문제가 있습니다.
import * as Agent from 'agentkeepalive'
const httpAgent = new Agent({
maxSockets: 100,
maxFreeSockets: 10,
// timeout을 설정해서 얼마동안 연결을 유지할지 지정해줍니다.
timeout: 60000,
freeSocketTimeout: 30000,
})
// Axios 인스턴스 생성. 저는 이 인스턴스를 계속 사용합니다.
const httpClient = axios.create({
httpAgent: httpAgent,
headers: {
// 요청 헤더 값
}
})
// HTTP 요청은 노드JS에서는 비동기적으로 작동합니다.
async function func(apiURL: string){
const resp = await httpClient.get(apiURL)
const data = await resp.data;
// 이후 작업 진행
}- GET
- 서버로 부터 데이터를 받아올때 (Get) 주로 사용됩니다.
- HTTP 통신 할 때 주소에 있는 쿼리스트링을 사용해서 정보를 전달 할 수 있습니다.
const axios_get = () => {
axios.get("http://localhost:8080/get")
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
})
}axios.get() 함수를 이용해서 GET Method를 간단하게 사용할 수 있습니다.
axios.get(url, [, config])
.then()을 통해서 통신에 성공했을 때 response가 반환되고 .catch()를 통해서 통신 실패 했을 때 error가 반환됩니다.
- POST
- 서버로 데이터를 전송하여 자원(Resource)를 생성(Create) 할 때 사용됩니다.
- JSON 형식이나 객체 형식으로 데이터를 전송할 수 있습니다.
const axios_post = () => {
const data = {
name : 'name',
age: 23
}
axios.post("http://localhost:8080/post", data)
.then((response => {
console.log(response)
})
.catch((error) => {
console.log(error);
})
}axios.post() 함수를 이용해서 POST Method를 간단하게 사용할 수 있습니다.
axios.post(url, data, [, config])
- PUT
- 서버에 존재하는 Database 자원을 수정(Update) 하는데 사용합니다.
const axios_put = () => {
const data = {
age: 25
}
axios.put("http://localhost:8080/put", data)
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
})
}axios.put() 함수를 이용해서 PUT Method를 간단하게 사용할 수 있습니다.
axios.put(url, data, [, config])
- Delete
- 서버에 존재하는 Database 자원을 삭제(Delete) 하는데 사용합니다.
const axios_delete = () => {
axios.delete("http://localhost:8080/delete")
}// DELETE 요청의 두 번째 인자에 data: {} atrribute를 넣어주면 된다.
const axios_delete = () => {
axios.delete("http://localhost:8080/delete",
{
data: {
postId: ...
commentId: ...
}
});
}config option과 응답 스키마
{
// `data`는 서버가 제공한 응답(데이터) 입니다.
data: {},
// `status`는 서버 응답의 HTTP 상태 코드입니다.
status: 200,
// `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지입니다.
statusText: 'OK',
// `headers` 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공됩니다.
headers {},
// `config`는 요청에 대해 `axios`에 설정된 구성(config) 입니다.
config: {},
// `request`는 응답을 생성한 요청입니다.
// 브라우저: XMLHttpRequest 인스턴스
// Node.js: ClientRequest 인스턴스(리디렉션)
request: {}
}then을 사용하여 아래와 같이 응답을 받을 수 있습니다.
axios.get('/user/12345').then(function(response){
console.log(response.data)
console.log(response.status)
console.log(response.statusText)
console.log(response.headers)
console.log(response.config)
}axios vs fetch
async, await
async & await는 자바스크립트에서 가장 최근에 등장한 비동기 처리 패턴입니다.
async & await를 통해서 Promise 를 편하게 사용할 수 있습니다.
async ?
async 키워드는 함수의 앞에 붙어서 사용됩니다. async를 사용하게 되면 함수를 항상 Promise 를 반환하게 됩니다.
만약 반환값이 Promise가 아니라면 이행상태의 Promise(Resolved Promise) 형태로 값을 감싸 반환되게 됩니다.
const async = async () => {
return "test";
}
console.log(async());
async().then((data) => {
console.log(data);
})
Promise 형식으로 반환되고 이행상태의 Promise가 반환되어 .then()을 이용하여 처리 결과를 받을 수 있습니다.
await ?
await 키워드는 async 함수 안에서만 사용할 수 있습니다. 함수 안에서 await를 만나게 되면 Promise가 처리(Settled) 될 때까지 대기합니다. await를 이용하게 된다면 콜백함수 처리 없이 비동기 처리를 해줄 수 있습니다.
