Study/Vue

Vue.js 시작하기 07. HTTP 통신 라이브러리 - axios

going.yoon 2022. 1. 22. 11:38

#axios란

axios란 , ajax처럼 비동기 애플리케이션 개발을 위한 HTTP 통신 라이브러리이다. 과거 Vue 커뮤니티에서 공식적으로 쓰이고 있던 Vue Resource를 대신하여 현재 가장 널리쓰이고 있는 라이브러리이다. 

 

 

https://github.com/axios/axios

 

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for the browser and node.js

github.com

 

여기에 들어가면 해당 라이브러리를 다운받을 수 있다.

 

 

저 리포지토리에 들어가보면 Promise기반의 HTTP client라고 나오는데 Promise란 자바스크립트의 비동기 처리에 사용되는 객체를 말한다. 자바스크립트의 비동기 처리 패턴은 크게 

    1. callback

    2. promise

    3. promise + generator

    4. async & await

로 나눌 수 있다.

 

 

 

 

그렇다면, 비동기 처리란 무엇이냐?

 

  특정 코드의 연산이 끝날 때 까지 기다리는 것이 아니라 다음 코드를 먼저 실행해버리는 자바스크립트의 특성을 말한다.

 

 

 

그렇다면 promise란 무엇이냐??

 

자바스크립트에서 비동기 처리를 위해 사용하는 객체 객체 객체!!!!!!!!!!!!

 

 

이 promise 객체는 new 생성자를 통해 생성되고, 생성 시점에 콜백 함수를 선언할 수 있다. 콜백함수의 인자는 resolve, resolve이고 아래와 같다.

// 1. new 생성자를 통해 생성
new Promise();

// 2. 생성자 호출시 resolve, reject 인자를 가지는 콜백함수 선언
new Promise(function(resolve, reject) {
	//...
});

 

이 프로미스 객체는 3가지의 상태를 갖는다.

 

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

2. fulfilled(이행) : 비동기 처리가 완료되어 프로미시가 결과 값을 반환해준 상태

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

 

 

그럼 pending과 fulfill , 즉 대기와 이행상태에 대해 먼저 알아보자. 프로미스 객체가 생성되면 우선 pending상태가 되고, 콜백함수의 인자인 resolve가 실행되면 프로미스 객체는 fulfill, 이행 상태가 된다. 코드로 알아보자.

 

function getData() {
     return new Promise(function(resolve, reject){
        
        //#1. promise 객체가 생성 후 Pending(대기) 상태
        
        resolve(); // #2. 콜백함수의 인자로 들어온 resolve가 실행되면 Fulfill(이행) 상태

    });
}

getData().then(function(resolvedData){
	// #3. 프로미스 객체가 Fulfill(이행) 상태가 되면 then()을 통해 결과값을 받을 수 있다.
    console.log(resolvedData);
});

 

 그렇다면 rejected 상태는 , 당연 실패했을 때의 상태이겠다. 코드로 알아보자

 

function getData(){
	return new Promise(function(resolve, reject){
    
    	// #1. 콜백함수의 인자 중 실패했을 때 호출하는 함수 reject를 호출한다.
    	reject(new Error("Request is failed")); 
        
    });
}

getData().then().catch(function(err){
	// #2. then에서 catch()를 사용해 에러 처리
	console.log(err);
});

 

프로미스의 간단한 예제까지만 알아보고 넘어가자.

 

function getData(){
	return new Promise(function(resolve,reject){ // #1. promise 객체 생성
    	$.get('url 주소/products/1', function(response){
        	if(response){ // #2. 응답값이 정상일 때 fulfill상태 , resolve 함수 호출
            	resolve(response);
            }
            
            reject(response); // 3. 응답값 오류일 때 rejected 상태, reject 함수 호출
        });
    });
}

getData().then(function(data) {
	console.log("성공이닷" + data);
}).catch(function(err){
	console.log("에러닷" + err);
});

 

 

그렇다면 뷰에서 한 번 프로미스 / axios 객체를 사용해서 데이터를 가져오는 코드를 한번 작성해보자

<body>
    <div id="app">
        <button v-on:click="getData"> getData</button>
        <!-- #1. 데이터 호출 함수를 호출하는 버튼을 생성한다. 뷰에 getData 메소드가 있겠지-->

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app' , 
            methods : { // #2. getData method를 정의
                getData : function() { // #3. axios 호출 후 then과 catch로 콜백처리
                    axios.get('https://jsonplaceholder.typicode.com/users/')
                        .then(function(response){
                            console.log(response);
                        }).catch(function(err){
                            console.log(err);
                        });
                }
            }
        });
    </script>
</body>

 

통신이 성공했을 때 콘솔로그를 찍도록 해놓았으니 콘솔 로그를 확인해보자.

이 config, data, header, request, status, statusText는 axios 통신의 기본형태니 눈에 잘 익혀두자.

우리가 주로 필요한 것은 response.data가 되겠다. 

 

 

 

그렇다면, 우리가 통신을 통해 받아온 데이터를 화면에 뿌리고 싶을 때 어떻게 하면 될까?

Vue 인스턴스에 data 변수를 선언하고 , 통신이 끝난 후 response 객체를 해당 데이터에 주입해주면 되겠지?

<div id="app">
        <button v-on:click="getData"> getData</button>
        {{users}} <!-- users 데이터를 화면에 뿌려준다. -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app' , 
            data : { // #1. vue 인스턴스에 user라는 배열 데이터를 선언해준다.
                users : []
            },
            methods : {
                getData : function() {
                    axios.get('https://jsonplaceholder.typicode.com/users/')
                        .then(function(response){
                            console.log(response);
                            this.users = response; // #2. 통신 응답값을 users에 주입
                        }).catch(function(err){
                            console.log(err);
                        });
                }
            }
        });
    </script>
</body>

 

 

과연 그 결과는 ??

 

 

아무것도 안뜬다~!~!

 

 

 

이유인 즉슨, 비동기 처리 이후 이후 this가 가리키는 실행 컨텍스트가 바뀌었기 때문이다. 따라서 비동기 처리 이후 뷰 인스턴스의 데이터를 바꿔주기 위해서는 비동기 통신 호출 이전에 this가 가리키는 컨텍스트를 객체 변수에 담아놓고, 해당 객체 내의 변수에 접근하면 된다. 코드로 알아보자

 

 new Vue({
            el: '#app' , 
            data : {
                users : []
            },
            methods : {
                getData : function() {
                    var vm = this; // #1. 비동기 통신 이전의 컨텍스트를 vm 에 담아준다.
                    axios.get('https://jsonplaceholder.typicode.com/users/')
                        .then(function(response){
                            //console.log(this); // #2. 1번 코드 없이는 이 this는 뷰 인스턴스를 가리키지 않는다.
                            console.log(response);
                            vm.users = response; // #3. vm 의 data에 response를 주입
                        }).catch(function(err){
                            console.log(err);
                        });
                }
            }
        });

 

해당 포스팅은 인프런의 Vue.js 시작하기 - Age of Vue.js 학습 후 정리한 내용임을 알려드립니다.

'Study > Vue' 카테고리의 다른 글

Vue.js 시작하기 09. Watch  (0) 2022.01.22
Vue.js 시작하기 08. 템플릿  (0) 2022.01.22
Vue.js 시작하기 06. 뷰 라우터  (0) 2022.01.20
Vue.js 시작하기 05. 컴포넌트 레벨 간의 통신 방법  (0) 2022.01.19
Vue.js 시작하기 04. 컴포넌트 통신방식  (0) 2022.01.19

'Study/Vue'의 다른글

  • 현재글Vue.js 시작하기 07. HTTP 통신 라이브러리 - axios

관련글

티스토리툴바