• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

안녕하세요. 간단히 서버를 만들어서 axios로 비동기 통신하던중 질문드립니다.

20.03.23 01:56 작성 조회수 285

1

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex);
const storage = {
    fetch() {
        const headers = {
            'Content-Type' : 'application/json',
            'Accept' : 'application/json'
        };
        return axios.get("http://localhost:8080/todo/list", {headers})
            .then(response => {
                console.log(response.data.result); //이부분 출력시는 잘나옴..
                return response.data.result //리턴하면 Promise가 todoItems에 Object로 들어감...
            });
        /*
        if (localStorage.length > 0) {
            for (let i =0; i < localStorage.length; i++) {
                if(localStorage.key(i) != 'loglevel:webpack-dev-server') {
                    let value = JSON.parse(localStorage.getItem(localStorage.key(i)));
                    arr.push(value);
                }
            }
        }
        */
    }
};
export const store = new Vuex.Store({
   state: {
       todoItems : storage.fetch()
   },
    mutations : {
        addOneItem(state, todoItem) {
            const obj = {
                seq : null,
                completed : false,
                item : todoItem
            };
            //localStorage.setItem(todoItem, JSON.stringify(obj));
            state.todoItems.push(obj);
        },
        removeOneItem(state, payload) {
            localStorage.removeItem(payload.todoItem.item);
            state.todoItems.splice(payload.index, 1);
        },
        toggleComplete(state, payload){
            state.todoItems[payload.index].completed = !state.todoItems[payload.index].completed;
            localStorage.removeItem(payload.todoItem.item);
            localStorage.setItem(payload.todoItem.item, JSON.stringify(payload.todoItem));
        },
        clearTodo(state) {
            state.todoItems = [];
            localStorage.clear();
        }
    },
    actions : {
        add(context, payload) {
            return axios.post("http://localhost:8080/todo/add", payload, {
                headers : {
                    'Content-Type' : 'application/json;charset=utf-8'
                }
            }).then(response => context.commit('addOneItem', response));
        }
    }
});

안녕하세요. 비동기통신을 하던중 서버에서 데이터를 잘 가져왔고 response를 console로 찍었을떄 Array가 나왔는데 이제 fetch 함수에서 todoItems를 초기화해줄떄 Promise라는 객체로 들어가게 됩니다. ㅠㅠ

예제처럼 arr로 들어가게 하고싶은데 혹시 어떻게 해야할까요..?ㅠㅠ 강의중 말씀하신 Promise 인지...

답변 2

·

답변을 작성해보세요.

1

doqndnffo님의 프로필

doqndnffo

질문자

2020.03.23

대략적으로 변경한 소스는 fetch 함수부분이고  todoItems를 http 통신으로 가져와서 초기화 한후 add, delete 등등 적용해보려고 하였으나 Promise 객체가 등장한 이후 array로 초기화되지 않아서 어려움이 있습니다ㅠㅠ

0

안녕하세요 doqndnffo님, 좋은 질문이네요! 중급 강좌에서 바로 axios를 붙이실 생각을 하다니 잘하신 것 같습니다 :) 제가 바로 알아볼 수 있게 코드랑 설명 잘 첨부해주셔서 감사하구요. 위 코드를 보니 state 쪽 코드가 수정되어야 할 것 같습니다. 일단 fetch()의 결과는 Promise 객체가 되구요. 일반적으로는 컴포넌트 라이프 사이클이나 라우터 네비게이션 가드 쪽에서 axios get 요청을 한 다음에 받아오면 state에 담아줍니다.

위와 같은 구조는 제 수업 내용에 바로 비동기 처리를 적용하다보니 구조가 적합하지 않게 된 것인데요. 만약 그래도 무조건 여기서 데이터를 받아와야겠다 하신다면 store.fetch를 한번 더 Promise로 감싸거나 Promise.resolve() 같은 API를 활용해야 할 것 같습니다 :)