[Vue3] Axios로 로컬에 있는 json 목데이터 가져오는 법 참쉽죠

백엔드 api가 완성되기 전, api문서의 응답 example 가지고 화면단에 보여줄 데이터를 가져오는 법을 정리해보았다. 왕초보라서^^ 경로 가지고 삽질하다가 다시는 시간 허비 안 하겠다고 다짐하며 쓰는 글.

 

1. axios 설치

 

yarn add axios

 

2. 데이터 요청 메서드를 정의하는 프로젝트 파일에서 axios import 

 

import axios from 'axios'

 

3. 데이터 요청 메서드 쓰기

 

export async function fetchInfo(): Promise<DetailResponseI> {
	const response = await axios({
    	url: '/detailMock.json',
        method: 'GET',
    })
    
    return Promise.resolve(response.data.result);
}

// 또는

export async function fetchInfo(): Promise<DetailResponseI> {
	const response = await axios.get('/detailMock.json')
    
    return Promise.resolve(response.data.result);
}

 

4. 파일을 하나 만들어 json 형식의 mock 데이터를 복붙 한다.

 

// detailMock.json

{
    "code" : "SUCCESS",
    "errorCode" : "0000",
    "message" : "정상입니다.",
    "result" : {
      "orderNumber" : 21090321,
      "status" : "CANCELED", 
      "paymentType" : "CARD",
      ...

주의: axios로 받을 json 파일은 root > public 폴더 내에 위치시킨다. 

-> axios.get('/detailMock.json')의 의미는, root/public/detailMock.json 경로에서 /public까지의 경로를 생략한 것이다. 

 

5. 응답 값을 필요로 하는 프로젝트 파일에서 axios 메서드를 가져온다.

 

import { fetchInfo } from '@/api/service'

 

6. 메서드를 mounted 시점에서 콜 한다.

 

setup() {
	return {
    	bookingItem: {} as Ref<BookingItemI>,
        ...
    }
},
async mounted() {
	try {
    	const result = await fetchInfo();
        this.bookingItem = result.product
        ...
        
    } catch (e) {
    	console.log(e)
    } finally {
    	console.log('finally')
    }
    ...
}

 

7. 네트워크 창을 열고, response가 잘 들어오는지 확인한다.

 

크롬 네트워크 창에서 mock data 응답값이 잘 들어오는지 확인한다.