Vue, fetch returns empty array

Question

I'm fetching some data in my vue-cli project.

I'm using Vuex to store the data.

It all runs successfully apart from the fact that I get an empty array, I have checked in Postman, and it works perfectly.

As you can see in my actions i had my commit in the if statement, currently commented out and moved. But when run in there I get a Promise returned. And as the current edition of my code I get an empty array.

I really cant see what my error is, so my best bet is you guys are able to see what I'm missing.

First I have my actions:

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);
    }
}

And my mutations:

 /**
 *  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 }
},

And I have my default state, which is imported into state.js:

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

I call my action with a beforeRouteEnter:

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

and finally in my component I import mapState from Vuex:

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

Should it be commit(C.PROLANGAUGE_DATA_SUCCESS, res.json());? — ittus
– ittus, Commented Aug 3, 2019 at 14:42
I actually just tried that, and it returns a promise now, not sure how to handle that though — dumbprogrammer
– dumbprogrammer, Commented Aug 3, 2019 at 14:44
I see, you need to const items = await res.json() then commit(C.PROLANGAUGE_DATA_SUCCESS, items); — ittus
– ittus, Commented Aug 3, 2019 at 14:56

halfer · Accepted Answer · 2020-04-07 19:36:43Z

1

I think something like items = await res.json(), then committing items could be a way forward (make sure all promises are resolved).

edited Apr 7, 2020 at 19:36

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Aug 3, 2019 at 14:54

Sebastian Rothbucher

1,52311 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

halfer Over a year ago

Useful tip: when rendering inline code formatting, you only need single backticks in Markdown. Triple backticks (code fences) are only needed for a block. Single backticks are easier to edit.

Collectives™ on Stack Overflow

Vue, fetch returns empty array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related