API와 Axios 연동해보기

YU NA Joe·2022년 8월 13일

Axios란?!

Axios is a promise-based HTTP Client for node.js and the browser. On the server-side it uses the native node.js http module, while on the client (browser) it uses XMLHttpRequest.
즉, Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

설치

1. 서버에서 axios 설치
> npm install axios

2. 클라이언트(html)에서 axios 설치
jsDeliver / unpkg CDN 둘중 택

> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
><script src="https://unpkg.com/axios/dist/axios.min.js"></script>

=======================================

Axios 문법

axios({
    method: "get", 
    url: "www.naver.com", 
    headers: {'X-Requested-With': 'XMLHttpRequest'}, 
    params: { api_key: "1234", langualge: "en" }, 
    responseType: 'json',
    
    maxContentLength: 2000, 
    validateStatus: function (status) {
      return status >= 200 && status < 300; 
    }, 
    proxy: {
      host: '127.0.0.1',
      port: 9000,
      auth: {
        username: 'mikeymike',
        password: 'rapunz3l'
      }
    }, // proxy서버의 hostname과 port를 정의
    maxRedirects: 5, 
    httpsAgent: new https.Agent({ keepAlive: true }),
})
.then(res)=>{}) // 응답이 성공하면은 보내는 내용
.cathcth((err)=>{}); // 응답이 실패하면은 보내는 내용

======================위의 설명======================

method : 요청방식. (get이 디폴트)
url : 서버 주소
headers : 요청 헤더
data : 요청 방식이 'PUT', 'POST', 'PATCH' 해당하는 경우 body에 보내는 데이터
params : URL 파라미터 ( ?key=value 로 요청하는 url get방식을 객체로 표현한 것)
responseType : 서버가 응답해주는 데이터의 타입 지정 (arraybuffer, documetn, json, text, stream, blob)
maxContentLength: http 응답 내용의 max 사이즈를 지정하도록 하는 옵

validateStatus : HTTP응답 상태 코드에 대해 promise의 반환 값이 resolve 또는 reject 할지 지정하도록 하는 옵션
proxy : proxy서버의 hostname과 port를 정의하는 옵션

maxRedirects : node.js에서 사용되는 리다이렉트 최대치를 지정

httpAgent /  httpsAgent : node.js에서 http나 https를 요청을 할때 사용자 정의 agent를 정의하는 옵션

더미데이터로 Axios를 사용해 보자

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js" 
    integrity="sha512-odNmoc1XJy5x1TMVMdC7EMs3IVdItLPlCeL5vSUPN2llYKMJ2eByTTAIiiuqLg+GdNr9hF6z81p27DArRFKT7A==" 
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="./script.js"></script>
</body>
</html>

script.js

axios({
method: "get",
url: "https://jsonplaceholder.typicode.com/posts",
headers: {'X-Requested-With': 'XMLHttpRequest'}, 
responseType: "json", 
})
.then(function(response){
    console.log(response.data)
    console.log(response.status)
    console.log(response.headers)
    console.log(response.config)
});

async, await 방식으로도 처리해보기

이번에는 postId가 1인 사람의 comments만 가져와보기

// const axios = require('axios'); ==> 하면은 안됨 

async function dummy(){
	try{
        const config = {
            method: 'get', 
            params : {postId: 1},
            url: 'https://jsonplaceholder.typicode.com/comments?${params}',          
        }
        let res = await axios(config)
        console.log(res.data)

	} catch(err){
            console.error(err);	
}}

dummy()