본문 바로가기
개발/Vue.js

[인프런] axios

by areumtb 2019. 8. 28.

https://joshua1988.github.io/vue-camp/vue/axios.html#%EC%95%A1%EC%8B%9C%EC%98%A4%EC%8A%A4-%EC%84%A4%EC%B9%98

 

Axios | Cracking Vue.js

액시오스 뷰에서 권고하는 HTTP 통신 라이브러리는 액시오스(Axios)입니다. Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양합니다. 액시오스 설치 프로젝트에 액시오스를 설치하는 방법은 CDN 방식과 NPM 방식 2가지가 있습니다. CDN 방식 NPM 방식 액시오스 사용방법 라이브러리를 설치하고 나면 axios라는 변수에 접근할 수 있게 됩니다. axios 변수를 이

joshua1988.github.io

 

https://github.com/axios/axios

 

axios/axios

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

github.com

axios : 뷰에서 권고하는 HTTP 통신 라이브러리

Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양하다.

 

 

Promise  : js의 비동기 처리 패턴

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

 

자바스크립트 Promise 쉽게 이해하기

(중급) 자바스크립트 입문자를 위한 Promise 설명. 쉽게 알아보는 자바스크립트 Promise 개념, 사용법, 예제 코드. 예제로 알아보는 then(), catch() 활용법

joshua1988.github.io

 

 

- axios 스크립트 추가

- axios get 방식

 

- 예시 data url

https://jsonplaceholder.typicode.com/users/

 

- 적용

 

- 넘어온 데이터를 data user에 담기위해 this 를 vm 에 담음 

 this 를 따로 담은 이유는 axios안에서 this사용시 this 는 뷰가 아니라 window가 되어버림

  뷰의 user에 값을 담기 위해서 this를 vm에 담아서 사용한것.

 

 

 


참고 

 

https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/

 

자바스크립트의 동작원리: 엔진, 런타임, 호출 스택

(번역) 자바스크립트가 엔진에서 어떻게 돌아가나? 런타임과 호출 스택 해부

joshua1988.github.io

 

 

- 브라우저와 서버간의 통신구조 

댓글