Ajax - Axios라이브러리 사용법 (기본 개념, 문법 구성, 응답 데이터, get, post, 에러처리, Promise)

 

Ajax 란?

 

우선 Ajax는 Asynchronous JavaScript And XML의 약자이다.

Ajax의 약자를 토대로 본래 의미를 살펴보면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 데이터를 주고받는 기술이라고 할 수 있다.

html가 여타 기술들이 사용하는 새로운 접근법이라고 설명하기도 한다.

 

Ajax를 통해 서버와 비동기적으로 통신함으로 우리는 전체 웹 페이지를 다시 불러오는 동기 방식과는 다르게 점진적으로 해당 부분의 사용자 인터페이스를 갱신할 수 있다.

 

간단하게 말해 Ajax는 js에서 비동기 http통신이 가능하게 해준다.

 

비동기 http통신이란 response와 request를 비동기 식으로 다룰 수 있다는 것을 의미

 

즉, 데이터를 이동하고 화면을 구성하는데 있어 화면 갱신 없이 필요한 데이터를 서버로 보내고 응답을 가져오는 방법이다.

 

이걸 왜 사용하는 걸까?

 

- 단순하게 생각하면 WEB화면에서 무엇인가 부르거나 데이터를 조회하고 싶을때 페이지 전체를 새로고침하고 싶지 않아서라고 표현할 수 있다.

 

데이터의 형식으로는 크게, csv, json, xml 형식이다.

 

 

AJAX로 GET/ POST요청 하는 방법 3가지 

- XMLHttpRequest 라는 옛날 문법 쓰기

- fetch () 라는 최신 문법 쓰기

- axios같은 외부 라이브러리 쓰기

 

Axios 란?

 

- 운영 환경에 따라 브라우저의 xml http Request 객체 또는 Node.js의 http api사용

 

- Promise(ES6) api 사용

 

- 요청과 응답 데이터의 변형

 

- http요청 취소

 

- http 요청과 응답을 json형태로 자동 변경

 

npm install axios

 

일단 axios를 사용하기 위해서는 설치가 필요하다!

 

클라이언트(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는 Promise based HTTP client for the browser and node.js
즉, node.js와 브라우저를 위한 HTTP통신 라이브러리이다.
비동기로 HTTP 통신을 가능하게 해주며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기도 쉽다.

 

Axios 문법 구성

 

axios 요청(request) 파라미터 옵션

 

- method : 요청 방식 ( get 이 디폴트임.)

 

- url : 서버 주소

 

- baseURL : url을 상대경로로 쓸 때 url 맨 앞에 붙는 주소

 

- headers : 요청 헤더

 

- data: 요청 방식이 put, post, patch 해당하는 경우 body에 보내는 데이터

 

- params : url 파라미터 (?key= value 로 요청하는 url get 방식을 객체로 표현한 것)

 

- timeout : 요청 timeout이 발동 되기 전 milliseconds의 시간을 요청. timeout보다 요청이 길어진다면, 요청은 취소되게 된다.

 

- responseType : 서버가 응답해주는 데이터의 타입 지정

 

- responseEncoding : 디코딩 응답에 사용하기 위한 인코딩 (utf-8)

 

- transformRequest : 서버에 전달되기 전에 요청 데이터를 바꿀 수 있다.

 

- withCredentials : cross-site access-control 요청을 허용 유무, 이를 true로 하면 cross-origin으로 쿠키 값을 전달할 수 있다.

 

- auth : http 의 기본 인증에 사용. auth를 통해서 http의 기본 인증이 구성 가능

 

- maxContextLength : http응답 내용의 max사이즈를 지정하도록 하는 옵션

 

- validataStatus : http응답 상태 코드에 대해 promise의 반환 값이 resolve 또는 reject 할지 지정하는 옵션

 

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

 

- proxy : proxy 서버의 hostname과 port를 정의하는 옵션

 

- cancelToken : 요청을 취소하는데 사용되어 지는 취소 토큰을 명시

 

 

axios 응답 (response) 데이터

 

axios를 통해 요청을 서버에게 보내면, 서버에서 처리를 하고 다시 데이터를 클라이언트에 응답하게 된다.

 

이를 .then으로 함수인자로 (response)로 받아 객체에 담긴 데이터가 바로 응답 데이터이다.

 

ajax를 통해 서버로부터 받는 응답의 정보는 다음과 같다.

 

axios({
    method: "get", // 통신 방식
    url: "www.naver.com", // 서버
})
.then(function(response) {
  console.log(response.data)
  console.log(response.status)
  console.log(response.statusText)
  console.log(response.headers)
  console.log(response.config)
})

response.data: {}, // 서버가 제공한 응답(데이터)

response.status: 200, // `status`는 서버 응답의 HTTP 상태 코드

response.statusText: 'OK',  // `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지

response.headers: {},  // `headers` 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공

response.config: {}, // `config`는 요청에 대해 `axios`에 설정된 구성(config)

response.request: {}
// `request`는 응답을 생성한 요청
// 브라우저: XMLHttpRequest 인스턴스
// Node.js: ClientRequest 인스턴스(리디렉션)

 

axios 기본 형식

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Ziihyun',
    lastName: 'Lim'
  }
});

-> 기본 형식

import axios from 'axios'

function App(){
  return (
    <button onClick={()=>{
      axios.get('url주소').then((결과)=>{
        console.log(결과.data)
      })
      .catch(()=>{
        console.log('실패함')
      })
    }}>버튼</button>
  )
}

 

1. axios를 쓰려면 상단에서 import해오고

2. axios.get(URL) 이러면 그 URL로 GET요청이 된다.

3. 데이터 가져온 결과는 결과.data 안에 들어있다. 

그래서 위의 버튼 누르면 서버에서 가져온 데이터가 콘솔창에 출력된다. 

 

4. 인터넷이 안되거나 URL이 이상하면 실패하는데

실패했을 때 실행할 코드는 .catch() 안에 적으면 된다.

 

axios GET

 

get 메서드에는 2가지 상황이 존재함.

 

1. 단순 데이터 (페이지 요청, 지정된 요청) 요청을 수행할 경우

 

2. 파라미터 데이터를 포함시키는 경우 (사용자 번호에 따른 조회)

 

// user에게 할당된 id 값과 함께 요청을 합니다.
axios.get('/user?ID=12345')
  .then(function (response) {
    // 성공했을 때
    console.log(response);
  })
  .catch(function (error) {
    // 에러가 났을 때
    console.log(error);
  })
  .finally(function () {
    // 항상 실행되는 함수
  });

 

axios POST

 

post 메서드에는 일반적으로 데이터를 Message Body 에 포함시켜 보낸다.

 

axios.post("url", {
		firstName: 'Fred',
		lastName: 'Flintstone'
    })
    .then(function (response) {
        // response  
    }).catch(function (error) {
        // 오류발생시 실행
    })

 

AJAX 요청을 동시에 여러개 날리려면?

 

Promise.all([axios.get('URL1', axios.get('URL2')])

 

-> url1, url2 로 get요청을 동시에 진행한다.

 

둘 다 완료시 특정 코드를 실행하고 싶으면 .then()뒤에 붙이면 된다.

 

Promise.all()

 

Promise.all()은 여러개의 프로미스(Promise)를 비동기적으로 실행한다.

따라서 여러 개의 Promise처리를 비동기적으로 실행하고자 할 때, 사용가능하다.

 

async function sampleFunc(): Promise<void> {
    // time start
    console.time('promise all example');

    // first promise
    const fetchNameList = async (): Promise<string[]> => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
              const result: any = ['Jack', 'Joe', 'Beck'];
              resolve(result);
            }, 300);
        });
    };

    // second promise
    const fetchFruits = async (): Promise<string[]> => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
              const result: any = ['Apple', 'Orange', 'Banana'];
              resolve(result);
            }, 200);
        });
    };

    // third promise
    const fetchTechCompanies = async (): Promise<string[]> => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
              const result: any = ['Apple', 'Google', 'Amazon'];
              resolve(result);
            }, 400);
        });
    };

    // promise all
    const result: any[] = await Promise.all([
        fetchNameList(),
        fetchFruits(),
        fetchTechCompanies(),
    ]);

    // time end
    console.timeEnd('promise all example');

    console.log('%j', result);
}

// execute
sampleFunc();

 

-> 해당 코드의 전체 실행 시간은 402ms이다. 각 Promise들의 처리 시간(300ms, 200ms, 400ms) 중 가장 긴 시간인 400ms와 비슷한 시간이다. 이를 통해 비동기 적으로 실행되었음을 알 수 있다.

 

에러 처리

Promise.all() 메소드를 사용할 때 주의해야 할 점! 

 

파라미터로 여러 개의 Promise들이 배열 형태로 들어가게 되는데, 이 중 하나라도 reject가 되거나 에러가 발생할 경우, 모든 Promise들이 reject 된다. 

 

 

// third promise
const fetchTechCompanies = async (): Promise<string[]> => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const result: any = ['Apple', 'Google', 'Amazon'];
      reject(result);
    }, 400);
  });
};

Error: thrown: Array [
  "Apple",
  "Google",
  "Amazon",
]

 

-> 출력 결과

 

따라서, Promise.all()을 사용할 때 에는 에러 처리를 어떻게 할 것인가를 정하는 것이 중요하다.

 

// result 
let result: any[] = [];

// parameter array
const promiseList: any[] = [
  fetchNameList(),
  fetchFruits(),
  fetchTechCompanies(),
];

// try ~ catch
try {
  result = await Promise.all(promiseList);
} catch (e) {
	// default value: empty array
  result = Array(promiseList.length).fill([]);
  console.error('promise-all', e);
}

 

-> 세 가지 다른 비동기 함수(fetchNameList, fetchFruits, fetchTechCompanies)를 병렬로 실행하고, 모든 Promise가 완료될 때까지 기다린 다음 결과를 result 배열에 저장하는 JavaScript 코드이다.

 

 

 

object / array 자료 주고 받는 법

 

object/ array 를 주고 받으려면 따옴표를 쳐서 보내면 된다.

 

"{"name" : "kim"}"
 이런걸 json이라고 한다.

 

json은 문자 취급을 받기 때문에 서버와 자유롭게 주고받는다.

 

실제로 결과를 출력하면 (결과.data) 따옴표 쳐진 json이 나와야 하는데,

axios라이브러리는 json을 object/ array 변환작업을 자동으로 거치고 출력되기 때문에

object/ array가 출력 된다.

 

 

Fetch

 

fetch는 ES6부터 JavaScript의 내장 라이브러리로 들어왔다.
promise기반으로 만들어졌기에 Axios와 마찬가지로 데이터를 다루는데 어렵지 않으며, 내장 라이브러리라는 장점으로 인해 상당히 편리하죠. 코드 또한 간단다.

 

//fetch
const url ='http://localhost3000/test`
const option ={
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  body:JSON.stringify({
  	name:'zihyun',
    	age:22
  })

  fetch(url,options)
  	.then(response => console.log(response))

 

-> fecth 의 post method 구현

 

 

 

참고>

 

https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9

📚 AXIOS 설치 & 특징 & 문법 💯 정리