시작: API 호출

Vue CLI 3에서 제작된 SPA(Single Page Application) 프로젝트에서 단계적으로 Vue를 수행합니다.js 공부해.
목록 여기 있습니다.
이번에는 API 호출편이다.

전제 사항

라이프 사이클 편 완료.

json 파일 추가

public/todos.json 파일을 추가합니다.
public/todos.json

{
  "todos": [
    { "id": 1, "text": "Learn Vue" },
    { "id": 2, "text": "Learn about single file components" },
    { "id": 3, "text": "Learn about conponents" }
  ]
}

TodoList.수정

created() 라이프 사이클 연결fetch()을 사용하여 Todo 목록(json)을 가져옵니다.
※ 여기서는 json 파일을 직접 읽었지만, REST API 등에서 json 처리를 받은 것과 동일합니다.
src/views/TodoList.vue

// ...
export default {
  // ...
  data() {
    return {
      todos: []
    };
  },
  created() {
    fetch("http://localhost:8080/todos.json")
      .then(response => response.json())
      .then(json => {
        console.log(json);
        this.todos = json.todos;
      })
      .catch(error => console.error("Error:", error));
  },
  // ...
};

동작 확인

액세스http://localhost:8080/todolist, Todo 목록을 표시하면 OK.개발자 도구의 콘솔 로그에 API에서 얻은 json의 내용을 표시해야 합니다.

다음번

Vuex 모듈