# axios 적용

fetch만으로도 기본적인 ajax처리는 가능합니다.

하지만 좀 더 체계적으로 ajax를 처리하기 위해서는 axios라는 외부툴을 사용할 수 있습니다

이부분은 필수라기보다 선택이니 간단하게 알아두시고, 필요하실 때 사용하시면 되겠습니다.

강좌에서는 이전 강좌에서 fetch로 된 부분을 axios로 변경해보도록 하겠습니다.

* axios 설치

```
npm install axios
```

* 적용

```
import axios from 'axios'

let page = 1
let limit = 10

//$: items = fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=${limit}`).then(response => response.json())
$: items = axios.get(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=${limit}`).then(response => response.data)

```

axios get 으로는 다음과 같은 객체들이 반환 됩니다. 여기서 data가 받아온 데이터라고 보시면 되겠습니다.

그리고 필요에 따라 다음 객체들을 사용하실 수 있습니다.

* data: {}
* status: 200
* statusText: 'OK'
* headers: {}
* config: {}
* request: {}

```
$: items = axios.get(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=${limit}`)

.then(response => response.data)

```

fetch는 받아오는 객체: url redirected, status, ok그리고 data를 받기 위해서는 아래와 .json()으로 변환해서 사용해야 하는 차이가 있습니다.

```
$: items = fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=${limit}`)

.then(response => response.json())

```

[\[만들면서 배우는 Svelte\]](https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EC%8A%A4%EB%B2%A8%ED%8A%B8)

<div align="left"><img src="https://2456181503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFoRG7N_kopXKHrUIam%2F-MGqndftNeXvP53tyaae%2F-MGqwZuQK1aEaE5Bp21i%2F%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%86%E1%85%A7%E1%86%AB%E1%84%89%E1%85%A5%20%E1%84%87%E1%85%A2%E1%84%8B%E1%85%AE%E1%84%82%E1%85%B3%E1%86%AB%20svelte%20small.png?alt=media&#x26;token=e769cba7-bb5e-40a9-89c6-2879e60242bf" alt="만들면서 배우는 svelte"></div>