Vue, fetch에서 빈 배열을 반환합니다.

Vue, fetch에서 빈 배열을 반환합니다.

vue-cli 프로젝트에서 데이터를 가져오는 중입니다.

Vuex를 사용하여 데이터를 저장하고 있습니다.

이 모든 것은 제가 빈 배열을 받았다는 사실을 제외하고는 성공적으로 실행됩니다. 저는 포스트맨을 확인했고, 완벽하게 작동합니다.

제 행동에서 알 수 있듯이, 저는 약속을 했습니다.if문, 현재 주석 처리되어 이동되었습니다.하지만 그 안에서 뛰면,Promise반환된현재 버전의 코드로 빈 배열을 얻을 수 있습니다.

저는 제 실수가 무엇인지 정말 알 수가 없습니다. 그래서 제가 놓친 것을 여러분들이 볼 수 있을 것입니다.

먼저 제 행동이 있습니다.

export default {

async getProLanguages({ commit }) {
    commit(C.PROLANGAUGE_DATA_PENDING);
    try {
        const res = await fetch('https://dev-webapp-kimga5xexrm3o.azurewebsites.net/api/ProLang', {
            method: 'GET',
            mode: 'cors',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'Authorization': 'Bearer xxx'
            }
        });
        if (res.status === 200) {
            console.log(res);
            // commit(C.PROLANGAUGE_DATA_SUCCESS, JSON.stringify(res.json()));
        }
        else {
            commit(C.PROLANGAUGE_DATA_NO_CONTENT);
        }
        console.log(res)
        return commit(C.PROLANGAUGE_DATA_SUCCESS, JSON.stringify(res.json()));
    }
    catch (e) {
        commit(C.PROLANGAUGE_DATA_FAILURE);
    }
}

그리고 나의 돌연변이는:

 /**
 *  Indicates that programming language has succeded 
 * 
 * @param state 
 * @param  payload 
 */
[C.PROLANGAUGE_DATA_SUCCESS](state, payload) {
    state.programmingLanguages = { ...state.programmingLanguages, loading: false, error: false, noContent: false, items: payload }
},

그리고 기본 상태를 가지고 있습니다. 이 상태는 다음으로 가져옵니다.state.js:

const getDefaultState = () => ({
  programmingLanguages: {
    loading: false,
    error: false,
    noContent: false,
    items: [
      {
        id: undefined,
        name: undefined
      }
    ]
  }
});

저는 제 행동을 다음과 같이 부릅니다.beforeRouteEnter:

beforeRouteEnter(to, from, next) {
  store.dispatch('programmingLanguages/getProLanguages').then(() => {
    next();
  });
}

그리고 마지막으로 내 구성 요소에서 나는 수입합니다.mapStateVuex에서:

computed: {
  ...mapState({
    prolangs: state => state.programmingLanguages.programmingLanguages.items
  })
}

제 생각에는 그런 것 같아요.items = await res.json()그 다음에 저지르는items앞으로 나아갈 수 있는 방법이 될 수 있습니다(모든 약속이 해결되었는지 확인).

언급URL : https://stackoverflow.com/questions/57339167/vue-fetch-returns-empty-array