Axios는 HTTP 요청을 보내는 데 사용되는 인기 있는 JavaScript 라이브러리입니다. JavaScript 또는 Vue.js나 React.js와 같은 다른 JavaScript 라이브러리와 함께 사용되는 프로미스(promise) 기반 HTTP 클라이언트입니다. 이소모픽(isomorphic) 특성 덕분에 Axios는 동일한 코드베이스를 사용하여 클라이언트와 서버 사이드에서 동시에 실행될 수 있습니다. 또한, 사용자 친화적인 API를 구성하기 위해 async와 함께 공동으로 사용되는 강력한 도구입니다. 무엇보다도 Axios는 요청을 자동으로 취소하는 기능이 있어, 그렇지 않으면 매우 까다로운 작업을 쉽게 해결해 줍니다.
Axios는 어떻게 작동하나요?
Axios는 기본 프로미스 설정을 사용하여 동일한 코드로 브라우저와 Node.js에서 병렬로 실행됩니다. 프로미스 기반 HTTP 기능을 사용하여 Axios는 CRUD 작업을 수행하고 HTTP 요청을 REST 엔드포인트로 보냅니다. 이 튜토리얼에서는 Vue.js에서 Axios를 사용하여 REST API를 구성하는 단계를 안내해 드립니다.
시작해 봅시다!
사전 요구 사항
이 튜토리얼을 완료하려면 다음 사항이 필요합니다:
- Node.js 설치 및 Ubuntu 시스템에서의 설정.
- CentOS OS를 사용하는 경우, 이 가이드를 따라 CentOS 8에 Node.js 설치.
- 기본 지식: JavaScript.
1단계: Axios 설치
Axios를 설치하기 전에, 오류나 설치 실패를 방지하기 위해 시스템 리포지토리를 업데이트하는 것이 중요합니다:
|
1 |
sudo apt-get update |
다음으로, npm 소프트웨어 패키지를 사용하여 Axios를 설치합니다:
|
1 |
npm install axios --save |
또는, yarn 패키지 관리자를 사용하여 Axios를 설치할 수도 있습니다:
|
1 |
yarn add axios |
그 후, Vue.js 프로젝트를 생성하고 여기에 Axios를 임포트합니다:
|
1 |
import axios from ‘axios’; |
다음 단계에서는 요청을 가져오기 위해 axios.get() 메서드를 사용할 것입니다.
2단계: GET 요청을 사용하여 데이터 가져오기
여기서는 GET 요청을 사용하여 데이터를 가져올 것입니다. 메서드에서 직접 데이터를 가져오기 위해 axios.get() 메서드를 어떻게 사용하는지 살펴보세요:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<template> <div> <ul v-if="posts && posts.length"> <li v-for="post of posts"> <p><strong>{{post.title}}</strong></p> <p>{{post.body}}</p> </li> </ul> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { posts: [], errors: [], }; }, // 컴포넌트가 생성될 때 포스트를 가져옵니다. created() { axios .get(`http://jsonplaceholder.typicode.com/posts`) .then((response) => { // JSON 응답은 자동으로 파싱됩니다. this.posts = response.data; }) .catch((e) => { this.errors.push(e); }); } }; </script> |
다음과 같이 async 또는 await 버전을 보게 될 것입니다:
위 코드는 JSONPlaceholder 에서 포스트를 가져와 순서가 없는 목록 형태로 데이터를 분배합니다. 발생한 모든 오류는 다른 순서가 없는 목록에 표시됩니다.
3단계: POST 요청을 사용하여 데이터 전송하기
Opposite to the axios.get() 메서드와 반대로, 이제 axios.post() 메서드를 사용하여 POST 요청을 보낼 것입니다. 다음은 axios.post() 메서드를 적용하여 데이터를 전송하는 방법입니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<template> <div> <input type="text" v-model="postBody" @change="postPost()" /> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { postBody: "", errors: [] } }, methods: { // 호출 시 서버로 포스트를 전송합니다. postPost() { axios .post(`http://jsonplaceholder.typicode.com/posts`, { body: this.postBody }) .then((response) => {}) .catch((e) => { this.errors.push(e) }) } } } </script> |
다음과 같이 async 또는 await 버전을 볼 수 있습니다:
위 코드는 콘텐츠를 JSONPlaceholder에 제출하는 입력 필드를 생성합니다. 발생한 모든 유형의 오류는 다른 순서 없는 목록에 표시됩니다.
4단계: 공통 기본 인스턴스 설정하기
이 단계에서는 axios.create() 메서드를 사용하여 공통 기본 인스턴스를 생성할 것입니다. 공통 기본 인스턴스를 설정하는 목적은 모든 인스턴스에서 기본 URL을 공유하기 위함입니다.
모든 호출이 공통 서버나 Authorization 헤더와 같은 공통 헤더를 사용하는 경우 공통 기본 인스턴스가 유용합니다:
|
1 2 3 4 5 6 7 8 |
import axios from "axios"; export const HTTP = axios.create({ baseURL: `http://jsonplaceholder.typicode.com/`, headers: { Authorization: "Bearer {token}" } }) |
마지막으로, 컴포넌트에서 HTTP를 사용할 준비가 모두 끝났습니다:
모든 설정이 완료되었으므로, http-demo.js가 구축되었습니다. 이제 Axios는 동일한 코드베이스를 사용하여 JSONPlaceholder 및 Authorization 헤더에 동시에 연결됩니다. 가장 좋은 점은 Axios가 posts를 가져오고, 오류를 식별하여 순서 없는 목록에 표시한다는 것입니다.
결론
이 튜토리얼에서는 Axios를 사용하여 데이터를 푸시하고 가져오는(pull) 기본 사항을 배웠습니다. 또한, 공통 URL을 공유하기 위한 공통 기본 인스턴스를 생성했습니다. 하지만 여기서 Axios 학습을 멈추지 마세요. 다음과 같은 요청을 보내기 위해 다른 Axios 메서드를 연습해 보시기를 권장합니다. POST, PUT, PATCH 및 DELETE 요청을 보낼 수 있습니다. 자세한 내용은 Axios 문서를 깊이 있게 살펴보며 주제를 탐구하고 직접 프로젝트를 빌드해 보세요.
Axios 및 Vue.js 주제에 대해 더 자세히 알아보려면 다음 리소스를 확인해 보세요. 우리 블로그:
즐거운 코딩 하세요!
댓글
아직 댓글이 없습니다. 첫 번째로 작성해 보세요.