Axios

😎 Axios 정리

1. axios 인스턴스 생성하기

const instance = axios.create({ ...config });

axios.create를 이용해서 axios 인스턴스를 생성할 수 있고, 생성 시에 옵션을 설정할 수 있다.

1.1 인스턴스 생성 시에 base url 설정하기

const instance = axios.create({
	baseURL: 'https://www.api.com/',
});

instance.get('users') => www.api.com/users 로 GET 요청을 보낸다.

1.2 API 모듈화에 유용한 특정 URL을 인스턴스 생성하기

• 인스턴스 생성 함수

const API_ENDPOINT = 'https://www.api.com/';

function createInstance(url) {
	return axios.create({
    	baseURL: API_ENDPOINT + url,
    });
}

• 인스턴스 생성

// 게시글 API axios 인스턴스 생성
const postInstance = createInstance('posts');

• API 요청

// https://www.api.com/posts/로 데이터 요청
postInstance.get('/');

2. axios 인터셉터 설정하기

3. axios formData, query parameter 전달하기

참고 : https://github.com/nuxt-community/axios-module/issues/97

참고2 : https://xn--xy1bk56a.run/axios/guide/api.html#%EA%B5%AC%EC%84%B1-%EC%98%B5%EC%85%98

const { data } = await this.$axios.post(endpoint, { data: {  }, params: {  } })

formData는 data 프로퍼티에 query paramter는 params 프로퍼티에 객체 형식으로 전달할 수 있다.