javascript - Vue,获取返回空数组

标签 javascript vue.js fetch vuex

我正在我的 vue-cli 项目中获取一些数据。

我正在使用 Vuex 来存储数据。

除了我得到一个空数组之外,一切都成功运行,我已经在 Postman 中 checkin ,它运行完美。

正如您在我的操作中看到的那样,我在 if 语句中进行了提交,目前已被注释掉并移动。但是当在那里运行时,我得到了一个 Promise 返回。作为我代码的当前版本,我得到一个空数组。

我真的看不出我的错误是什么,所以我最好的选择是你们能够看到我遗漏了什么。

首先我有我的 Action :

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

最后在我的组件中,我从 Vuex 导入 mapState:

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

最佳答案

我认为像 items = await res.json() 这样的东西,然后提交 items 可能是一种前进的方式(确保所有 promise 都得到解决)。

关于javascript - Vue,获取返回空数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57339167/

相关文章:

javascript - 如何在 vuetify 弹出模式上放置要使用输入元素(v-select)固定的下拉项?

php mysql 4个表连接

javascript - Node 获取响应为 503,其中请求响应为代理后面的 200

javascript - 如何处理 JavaScript document.write 中 HTML 的引用

javascript - 将值传递给模态窗口中的 JavaScript 函数

javascript - 如何创建本地存储的循环函数

javascript - 调用时如何获取函数名?

javascript - 如何在VUE js中的组件之间共享数据(创建列表时)

Vue.JS - 'history' 和 'hash' 路由器?

php - React Fetch 到 Laravel API 创建新 session