Skip to content

Latest commit

ย 

History

History
99 lines (76 loc) ยท 2.58 KB

File metadata and controls

99 lines (76 loc) ยท 2.58 KB

JavaScript

Axios

๊ฐœ๋…

  • "Promise based HTTP client for the browser and Node.js"
  • ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์œ„ํ•œ Promise ๊ธฐ๋ฐ˜์˜ ํด๋ผ์ด์–ธํŠธ
  • ์›๋ž˜๋Š” "XHR"์ด๋ผ๋Š” ๋ธŒ๋ผ์šฐ์ € ๋‚ด์žฅ ๊ฐ์ฒด๋ฅผ ํ™œ์šฉํ•ด AJAX ์š”์ฒญ์„ ์ฒ˜๋ฆฌํ•˜๋Š”๋ฐ, ์ด๋ณด๋‹ค ํŽธ๋ฆฌํ•œ AJAX ์š”์ฒญ์ด ๊ฐ€๋Šฅํ•˜๋„๋ก ๋„์›€์„ ์คŒ
    • ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ์ธํ„ฐํŽ˜์ด์Šค์™€ ํ•จ๊ป˜ ํŒจํ‚ค์ง€๋กœ ์‚ฌ์šฉ์ด ๊ฐ„ํŽธํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ œ๊ณต

XMLHttpRequest - >Axios

XMLHttpRequest

const xhr = new XMLHttpRequest()
const URL = 'https://jsonplaceholder.typicode.com/todos/1'
xhr.open('GET',URL)
xhr.send()
xhr.onreadystatechange = function(event) {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        const status = event.target.status
        if (status ===0 || (status>=200 && status <400)){
            const res = event.target.response
            const data = JSON.parse(res)
            console.log(data)
            console.log(data.title)
        }else {
            console.error('Error!')
        }
    } 
}

Axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	const URL = 'https://jsonplaceholder.typicode.com/todos/1'
    
    axios.get(URL)
    	.then(res => console.log(res.data.title))
    	.catch(err => console.log('Error!'))
</script>

Aixos ์˜ˆ์‹œ

todos์—์„œ 1๋ฒˆ ๋ฐ์ดํ„ฐ ๋ฐ›์•„์˜ค๊ธฐ

const URL = 'https://jsonplaceholder.typicode.com/todos/1'

// const responsePromise = axios.get(URL)
// responsePromise
//   .then(function(res){return res.data} )
//   .then(function (x) {console.log(x.title)})


axios.get(URL) //Promise ๋ฆฌํ„ด 
	//data ๋ฐ›์•„์˜ค๊ธฐ 
    .then(res => res.data)
	//data์—์„œ title ๋ฝ‘๊ธฐ 
    .then(todo => todo.title)
	//title ์ถœ๋ ฅํ•˜๊ธฐ 
    .then(title => console.log( title ))
	//๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์—๋Ÿฌ ๋ฑ‰๊ธฐ 
    .catch(err => console.error(err)
     .finally(x) => console.log('๋'))

todolist์— ์ ‘๊ทผํ•ด์„œ 10๋ฒˆ ๋ฐ์ดํ„ฐ ๋ฐ›์•„์˜ค๊ธฐ

	const URL = 'https://jsonplaceholder.typicode.com/todos/'
    
    // const responsePromise = axios.get(URL)
    // responsePromise
    //   .then(function(res){return res.data} )
    //   .then(function (x) {console.log(x.title)})

    
    axios.get(URL) //Promise ๋ฆฌํ„ด 
	//data ๋ฐ›์•„์˜ค๊ธฐ  
    .then(res => {
      const todoArray = res.data
      const todo = todoArray.find(todo => todo.id === 10)
      return axios.get(`${URL}${todo.id}`)
    } )
    .then(res => console.log(res.data))
	//๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์—๋Ÿฌ ๋ฑ‰๊ธฐ 
    .catch(err => console.error(err))
     .finally(x => console.log('๋'))