axios, await, async

배세훈·2021년 9월 23일
1

react

목록 보기
6/9

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;
    // 이후 작업 진행
}
  1. 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가 반환됩니다.

  1. 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])

  1. 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])

  1. 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를 이용하게 된다면 콜백함수 처리 없이 비동기 처리를 해줄 수 있습니다.

profile
성장형 인간

0개의 댓글