[javascript] ajax 1

JS - 비동기처리

  • 자바스크립트는 싱글쓰레드이다?
    • 브라우저가 싱글쓰레드이다. ( Tab 단위 )
  • 브라우저 콘솔에 while(1) {} 명령을 치면 다른 작업을 못한다.
    • 브라우저 1개의 탭은 1명에 일꾼만 있어서 ( 싱글스레드 )

:one: Ajax 요청

Asynchronous Javascript And Xml

자바스크립트로 비동기 요청을 보낸다.

1 요청 => 1 새로고침

무한스크롤

:cupid: 사용목적

:cupid: XML 이 자꾸 나오는 이유?

json 등장 이전에는 xml 이 가장 널리 사용되어서 관습적으로 남아있다.

:cupid: Ajax 요청을 보내기 위해서는 무엇을 써야 하나?

:two: Axios 사용

Promise based HTTP client for the broswer and node.js

axios는 node.js 와 브라우저를 위한 http통신 javascript 라이브러리이다.

대부분의 브라우저를 지원한다.

참고블로그

:cupid: 특징

:cupid: 설치

# npm
$ npm install axios

# bower
$ bower install axios

# yarn
$ yarn add axios

# CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

:cupid: Promise

:cupid: 코드

<script>
    // promise => 성공 or 실패
    // 성공했을 때, 어떤 일을 한다 .then()
    // 실패했을 때, 어떤 일을 한다 .catch()
    console.log(1)
    axios.get('https:koreanjson.com/posts/1')
        .then(function (res) { return res.data })
        .then(function (data) { return data.content })
        .then(function (content) { console.log(content) })
    console.log(2)
</script>

출력
<!--
1
2
content
-->

:cupid: JS 작성이 어려운점

:three: 프로젝트에 적용하기