Collections > New Collection(기존의 Collection 사용해도 괜찮음!) > Add a request

My Workspace > New > Mock Server

Select an existing collection > 방금 만들어 둔 Collection > 이름 입력하고 Create Mock Server

Mock Server의 URL을 새로 만든 Response의 url에 넣은 다음 그 뒤에 파라미터 넣고 Send.

그 후 Response 오른쪽의 … 누르고 Add example 클릭

Example에서 URL 똑같이 입력 후 원하는 Response Body 입력하고 Text → JSON으로 형식을 바꾼다. 그 후 Example이랑 Request 둘 다 save.

Runner > environment : mock server 02로 바꾸고 > 새로 만든 Collection Drag and Drop > Run Test

결과가 나온다.

이제 해당 URL을 axios를 통해 코드에서 받아온다.

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>이름</th>
          <th>나이</th>
          <th>국가</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in **userList**" :key="user.id">
          <td>{{user.name}}</td>
          <td>{{user.age}}</td>
          <td>{{user.country}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'ServerDataView',
  data() {
    return {
      **userList: [],**
    }
  },
  **created()** {
    this.getUserList()
  },
  methods: {
    async **getUserList()** {
      const res = await this.api(
        **'<https://74d6fb51-cb10-4989-8a39-5528af823cb3.mock.pstmn.io/user_list_get>'**,
        'get',
        {}
      )
      this.userList = res.data
      console.log(this.userList)
    },
    async api(url, method, data) {
      return await axios({
        method,
        url,
        data,
      })**.catch((e) => {
        console.log(e)
      }**)
    },
  },
}
</script>

<style scoped>
li {
  list-style: none;
}
</style>