연계 컨텐츠
1. Axios를 이용한 통신 : https://dev-leon.tistory.com/82
2. Axios를 이용한 통신 모듈 구조화 : https://dev-leon.tistory.com/83
Axios란
프런트엔드에서 Promise 방식으로 HTTP 통신을 수행하는 라이브러리입니다.
프런트엔드에서 가장 많이 사용하는 라이브러리입니다.
설치방법
npm 방식
npm install axios
yarn 방식
yarn add axios
사용 방법
api.ts 파일에 Axois 객체 생성하고 intercepters까지 적용
import axios, { Axios } from 'axios';
const api: Axios = axios.create({
baseURL: 'your-backend-url',
// 기본적인 통신의 포멧은 json
headers: {
'Content-Type': 'application/json',
},
});
api.interceptors.request.use(
function (config) {
// 요청을 보내기 전에 AccessToken을 헤더에 추가
const token = 'my-token';
config.headers.Authorization = `Bearer ${token}`;
return config;
},
function (error) {
// 요청 에러 처리
// api 객체를 사용하는 곳에서는 exception 구문으로 호출됨
return Promise.reject(error);
}
);
// 응답 인터셉터 추가
api.interceptors.response.use(
function (response) {
// 2xx 범위에 있는 상태 코드는 이 함수를 트리거합니다.
// 응답 데이터 반환
return response;
},
function (error) {
// 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거합니다.
// api 객체를 사용하는 곳에서는 exception 구문으로 호출됨
return Promise.reject(error);
}
);
export default api;
.vue 파일에서 Axios 객체 사용
import api from './api';
function test(){
api.get(this.url)
.then((res) => {
console.log((res.data)
})
.catch((err) => {
console.log(err);
})
}
'Web > Quasar' 카테고리의 다른 글
Quasar에서 다국어(vue-i18n) 사용하기 (0) | 2024.08.21 |
---|---|
Axios를 이용한 통신 모듈 구조화 - ts 버전 (0) | 2024.07.09 |
Quasar에서 환경 변수 사용하기 - 보류(파일로 사용하는 방식은 보안이 안됨) (0) | 2024.07.02 |
Quasar App의 생명주기와 저장소별 생명주기 (0) | 2024.05.03 |
Quasar용 SessionStorage, LocalStorage 사용하기 (0) | 2024.05.03 |