axios

1. 개요

 1) vue에서 권고하는 HTTP 통신 라이브러리로 promise(자바스크립트 비동기 처리 패턴 중 하나) 기반

 2) 브라우저, node.js를 위한 promise API를 활용하는 HTTP 비동기 통신 라이브러리

 

 ※ 비동기(asynchronous)

  (1) 특정 코드의 연산이 끝날 때까지 기다리지 않고, 다른 코드를 실행

  (2) 사용자 입장에서는 마치 동시에 여러 코드가 진행되는 것처럼 보임 (병행처리 개념) 

  (3) example: ajax, setTimeout()

  (4) 원하는 결과값이 노출되지 않을 가능성이 존재

   - callback: ajax를 통해 서버 통신 후 response를 callback함수를 태워 원하는 결과값 도출 가능

   § callback hell

     서버에서 데이터를 받아와 인코딩, 사용자 인증 등을 진행한 후 화면에 표시해야하는 경우

     callback함수 안에 callback 함수가 연속해서 이어지는 형식으로 코드가 작성되면

     가독성이 떨어지고 유지, 보수도 어려움 -> callback 함수를 분리하는 것이 하나의 해결 방법

 

   - promise: 자바스크립트 비동기 처리에 사용되는 객체

   - async & await: 자바스크립트 비동기 처리에 사용되는 가장 최근 패턴

 

2. promise

 1) ajax 통신 코드

function resultData(callbackFunc){
   $.get('url address/product/xxx', function(response){
      callbackFunc(response);   // 서버 로직을 통해 받은 데이터 response를 callbackFunc() method로
   });
}


resultData(function(data) {
   // response 값이 data로 전달
   console.log("--------------- data ---------------");
   console.log(data);
});

 

 2) promise 적용

function resultData(callback){
   // new Promise method 추가
   return new Promise(function(reslove, reject){
      $.get('url address/product/xxx', function(response){
         if(response != null && response != ''){
            // 유효 데이터가 존재하고 데이터를 받으면 reslove method 호출
            setTimeout(function() {   // 3초 후에 결과 로딩
               reslove(response);
            }, 3000);
         } else {
            // 데이터 존재하지 않거나, 오류 또는 실패 발생
            reject(new Error("request is failed!"));
         }
         
      });
   });
}

resultData().then(function(data){
   // resolve method 결과값이 전달
   console.log("------- reslut ------");
   console.log(data);
}).catch(function(err){
   console.log("------- result:: error ------");
   console.log(err);
});

 

 3) promise 상태

  (1) pending: 비동기 처리 로직이 아직 완료되지 않은 상태

  (2) fullfilled: 비동기 처리가 완료되어 promise가 결괏값을 return한 상태

   - then() 을 이용하여 처리 결괏값을 받을 수 있음

  (3) rejected: 비동기 처리가 실패하거나 오류가 발생한 상태

   - 실패한 이유를 catch() 로 받을 수 있음

 

3. async & await

function fetchUser(){
   var url = 'https://xxx.yyy.com/users/abc1234';
   return fetch(url).then(function(response){
      return response.json();
   });
}

function fetchAddress(){
   var url = 'https://xxx.yyy.com/address/abc1234';
   return fetch(url).then(function(response){
      return response.json();
   });
}

/*
* 1. fetchUser method를 통해서 사용자 정보 호출
* 2. 사용자 정보 중 아이디가 abc1234 라면 주소 정보 호출
* 3. 받아온 주소 정보를 console log로 출력
*/
async function logGetAddress(){
   var user = await fetchUser();
   
   if(user.id === 'abc1234'){
      var getAddress = await fetchAddress();
      console.log(getAddress.title);
   }
}

 1) 가독성

 2) promise 패턴과 달리 비동기 처리에 대한 부담 절감

 

 

＃ reference

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

https://joshua1988.github.io/web-development/javascript/js-async-await/

 

4. axios 특징

 1) promise(ES6) API 사용: return 값이 promise 객체 형태

 2) node.js에서 사용 가능, 요청 취소 가능

 3) request데이터, response 데이터 변형

 4) HTTP 요청, 응답을 JSON 형태로 자동 변

 5) catch에 걸렸을 때 then을 실행하지 않고, console에 해당 error log 출력

 6) fetch와 차이

  (1) 자바스크립트 내장 라이브러리가 아니라 import 필요

  (2) 지원하지 않는 구형 브라우저 존재

  (3) 네트워크 에러가 발생했을 때 response timeout API를 제공하지 않아 계속 대기해야 함

import axios from 'axios'	// 필수

...

new Vue({
   el: '#app',
   methods:{
      getData: function(){
         axios.get('url 주소')
              .then(function(response){   // 응답 성공
                 console.log('-------- response ---------');
                 console.log(response);
              }).catch(function(err){     // 응답 실패
                 console.log('-------- err -------');
                 console.log(err);
              });
      }
   }
});

...