Получение данных по публичному API через Axios во Vue?

Question

[danilr]

Делаю запрос к публичному сервису через Axios, но приходит пустой объект, подскажите где ошибка?
Файл с объектом axios:

import axios from 'axios'

export const HTTP = axios.create({
    baseURL: 'https://frontend-test-case.azurewebsites.net',
    timeout: 10000
})

export const Routes = {
    getList: '/api/report/card',
}

мутация во vuex:

mutations: {
    list(state) {
        HTTP.post(Routes.getList, {
          params: {
              period: 2,
              date: "2019-03-04T15:47:59.784Z"
            }
          })
          .then(data => {
            state.list = data;
            setTimeout(() => {
              console.log(state.list)
            }, 400);
          })
          .catch(error => {
            console.log(error);
          });
      }

Вот ссылка на публичный API:
https://frontend-test-case.azurewebsites.net/swagg...

Answer 1

[Алексей Ярков]

Может не params, а data? Вы же POST оправляете.
Или так вообще (не помню как в axios верно:

{
     "period": 0,
     "date": "2019-03-05T15:12:13.319Z"
 }

Answer 2

[Alex]

В мутациях нельзя применять асинхронные запросы. Мутации — исключительно синхронны. Для асинхронных аперацию используйте Actions — который получает данные и уже потом вызывает мутацию с подготовленным объектом для сохранения

Comments

[danilr]

Если запрос перенести в actions, как будет выглядеть код в мутации и вызов мутации в компоненте?
Правильно понимаю, что тогда и setTimeout будет не нужен, так как я его сделал, чтобы данные успевали подгрузиться?

[nvdfxx]

danilr, таймаут в принципе не нужен, вы же промисы тут юзаете

[Alex]

danilr, пересмотрите документацию -https://vuex.vuejs.org/ru/guide/actions.html

Я ж не могу писать код за вас.

[danilr]

Александр Козак, я переписал код, могли бы вы мне помочь - подсказать, почему я получаю пустые данные с этого запроса?

mutations: {
    getData(state, list){
      state.list = list
      console.log(state.list)
    }

  },
  actions:{
    list(context) {
      if (context.search != '') {
        HTTP.post(Routes.getList, {
          params: {
              "period": 0,
              "date": "2019-03-05T15:12:13.319Z"
            }
          })
          .then(data => {
            context.commit('getData', data)
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
  }
})