Vue axios 세팅

 

axios 다운

 ⬇️ NPM 다운

1. npm 다운 (프론트 엔드)

npm i --save vue-axios
npm i --save axios

1. package.json 확인

axiosInstance 생성

 ⬇️ axios.ts 작성

---

순서.

1. axios.ts 생성
2. axios.ts 작성
3. Interceptor ( custom )
4. 예시 코드 전체

---

axios.ts 생성

---

[ 위치 ] → project / src / util / axios.ts ( 사진 첨부 )

axios.ts 작성

---

1. instance

→ 백엔드로 보내기전 기본적으로 세팅할 항목에 대해 설정한다.

baseUrl ( 백엔드의 기본 경로 ) , headers , 요청제한 시간에 대한 설정등을 할 수 있다.

예시 )

1. baseUrl → http://localhost:3000/api /~ 로 보내게 된다.
2. headers → Content-Type은 application/json 을 사용하겠다.
3. timeout→ 요청 제한 시간은 20초로 하겠다.

import axios, {AxiosInstance} from 'axios';
import Vuex from '../store';
import Vue from 'vue';

const baseURL: string = '/api';

//1. instance 
const instance: AxiosInstance = axios.create({
  baseURL,
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 20000
})

export const ins = instance

Interceptor ( custom )

---

2. 인터셉터

→ 아래 항목에 대해 동작을 지정할 수 있다.

요청보낼때, 받을때

2_1. request interceptor

→ 예시 ) request 요청을 보낼때 마다 , token이 있는지 확인 후 있다면 headers의 Authorization 항목에 Bearer ${token} 로 설정하여 보내겠다.

없을시 아무 행동하지 않음.

//2_1. **r**equest interceptor
instance.interceptors.request.use(config => {
  const token = Vuex.getters.getAccessToken;
  if (token) config.headers['Authorization'] = `Bearer ${token}`;

  return config;
})

2_1. response interceptor

→ 예시 ) response 요청을 받을때 마다 행동하지 않으나,

error 확인 시 console.error로 에러에 대한 메세지를 출력해주고 있다.

주석처리된 것 처럼 , toast를 통해 알림창등으로 쉽게 확인이 가능하다.

//2_1. **response** interceptor
instance.interceptors.response.use(response => {
  const {data} = response
  const {result, error} = data
  return response
}, error => { //--->> error 확인 시 
  const {response} = error
  const {status, data} = response
  console.error(data.message)
  // Vue.$toast.open({
  //   message: data.message,
  //   type: 'error',
  //   duration: 5000
  // });
  return response
});

예시 전체

---

import axios, {AxiosInstance} from 'axios';
import Vuex from '../store';
import Vue from 'vue';

const baseURL: string = '/api';

const instance: AxiosInstance = axios.create({
  baseURL,
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 20000
})

instance.interceptors.request.use(config => {
  const token = Vuex.getters.getAccessToken;
  if (token) config.headers['Authorization'] = `Bearer ${token}`;

  return config;
})

instance.interceptors.response.use(response => {
  const {data} = response
  const {result, error} = data
  return response
}, error => {
  const {response} = error
  const {status, data} = response
  console.error(data.message)
  // Vue.$toast.open({
  //   message: data.message,
  //   type: 'error',
  //   duration: 5000
  // });
  return response
});

export const ins = instance

 

main.ts에 추가

→ 작성한 axios 인스턴스를 , VueAxios에 끼워준다.

[ main.js ] or ts 영역

import VueAxios from 'vue-axios';
import {ins as axios} from './util/axios';
Vue.use(VueAxios, axios)

사용법

vue 영역에서

//this.axios or Vue.axios로 접근가능.
//HTTP 메소드 확인 후 사용
// this. 로 접근 가능한것은 Vue를 extends 받았을때만 사용 가능

const { data } = await Vue.axios.get('URL',option) 
const { data } = await this.axios.post('URL',option) 
const { data } = await this.axios.patch('URL',option) 

axios 다운

<aside> ⬇️ NPM 다운

1. npm 다운 (프론트 엔드)

npm i --save vue-axios
npm i --save axios

1. package.json 확인

</aside>

axiosInstance 생성

<aside> ⬇️ axios**.ts** 작성

---

순서.

1. axios.ts 생성
2. axios.ts 작성
3. Interceptor ( custom )
4. 예시 코드 전체

---

axios**.ts 생성**

---

[ 위치 ] → project / src / util / axios.ts ( 사진 첨부 )

axios.ts 작성

---

1. instance

→ 백엔드로 보내기전 기본적으로 세팅할 항목에 대해 설정한다.

baseUrl ( 백엔드의 기본 경로 ) , headers , 요청제한 시간에 대한 설정등을 할 수 있다.

예시 )

1. baseUrl → http://localhost:3000/api /~ 로 보내게 된다.
2. headers → Content-Type은 application/json 을 사용하겠다.
3. timeout→ 요청 제한 시간은 20초로 하겠다.

import axios, {AxiosInstance} from 'axios';
import Vuex from '../store';
import Vue from 'vue';

const baseURL: string = '/api';

//1. instance 
const instance: AxiosInstance = axios.create({
  baseURL,
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 20000
})

export const ins = instance

Interceptor ( custom )

---

2. 인터셉터

→ 아래 항목에 대해 동작을 지정할 수 있다.

요청보낼때, 받을때

2_1. request interceptor

→ 예시 ) request 요청을 보낼때 마다 , token이 있는지 확인 후 있다면 headers의 Authorization 항목에 Bearer ${token} 로 설정하여 보내겠다.

없을시 아무 행동하지 않음.

//2_1. request interceptor
instance.interceptors.request.use(config => {
  const token = Vuex.getters.getAccessToken;
  if (token) config.headers['Authorization'] = `Bearer ${token}`;

  return config;
})

2_1. response interceptor

→ 예시 ) response 요청을 받을때 마다 행동하지 않으나,

error 확인 시 console.error로 에러에 대한 메세지를 출력해주고 있다.

주석처리된 것 처럼 , toast를 통해 알림창등으로 쉽게 확인이 가능하다.

//2_1. **response** interceptor
instance.interceptors.response.use(response => {
  const {data} = response
  const {result, error} = data
  return response
}, error => { //--->> error 확인 시 
  const {response} = error
  const {status, data} = response
  console.error(data.message)
  // Vue.$toast.open({
  //   message: data.message,
  //   type: 'error',
  //   duration: 5000
  // });
  return response
});

예시 전체

---

import axios, {AxiosInstance} from 'axios';
import Vuex from '../store';
import Vue from 'vue';

const baseURL: string = '/api';

const instance: AxiosInstance = axios.create({
  baseURL,
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 20000
})

instance.interceptors.request.use(config => {
  const token = Vuex.getters.getAccessToken;
  if (token) config.headers['Authorization'] = `Bearer ${token}`;

  return config;
})

instance.interceptors.response.use(response => {
  const {data} = response
  const {result, error} = data
  return response
}, error => {
  const {response} = error
  const {status, data} = response
  console.error(data.message)
  // Vue.$toast.open({
  //   message: data.message,
  //   type: 'error',
  //   duration: 5000
  // });
  return response
});

export const ins = instance

</aside>

main.ts에 추가

→ 작성한 axios 인스턴스를 , VueAxios에 끼워준다.

[ main.js ] or ts 영역

import VueAxios from 'vue-axios';
import {ins as axios} from './util/axios';
Vue.use(VueAxios, axios)

사용법

vue 영역에서

//this.axios or Vue.axios로 접근가능.
//HTTP 메소드 확인 후 사용
// this. 로 접근 가능한것은 Vue를 extends 받았을때만 사용 가능

const { data } = await Vue.axios.get('URL',option) 
const { data } = await this.axios.post('URL',option) 
const { data } = await this.axios.patch('URL',option)