Vuejs с запросом axios в магазине vuex: не может сделать более одного запроса, почему?

Я создаю некоторую информационную панель vuejs с vuex и axios, между другими, и некоторое время я боролся с довольно неприятной проблемой: кажется, я не могу сделать более одного запроса! Все последующие вызовы терпят неудачу с этой ошибкой:

Ошибка выборки... SyntaxError: Не удалось выполнить setRequestHeader для XMLHttpRequest: Bearer {the_entire_content_of_the_previous_api_response}'не является допустимым значением поля заголовка HTTP.

Мой магазин выглядит так:

import axios from "axios";

const state = {
  rawData1: null,
  rawData2: null
};

const actions = {
  FETCH_DATA1: ({ commit }) =>
  {
    if (!state.rawData1)
      return axios.get("/api/data1")
      .then((response) =>
      {
        commit("SET_RAW_DATA1", response.data);
      });
  },

  FETCH_DATA2: ({ commit }) =>
  {
    if (!state.rawData2)
      return axios.get("/api/data2")
      .then((response) =>
      {
        commit("SET_RAW_DATA2", response.data);
      });
  }
};

const mutations = {
  SET_RAW_DATA1: (state, data) =>
  {
    state.rawData1 = data;
  },

  SET_RAW_DATA2: (state, data) =>
  {
    state.rawData2 = data;
  }
};

export default
{
  namespaced: true,
  state,
  actions,
  mutations
};

Я не думаю, что у моего API есть какие-либо проблемы, так как кажется, что все работает гладко через Postman.

Может быть, это очевидно для некоторых, но я не могу понять, в чем дело, так как я все еще довольно нюб...

О, и я обращаюсь с Axios Promise, как это, если это представляет интерес:

this.$store.dispatch("api/FETCH_DATA1").then(() =>
{
  // parsing this.$store.state.api.rawData1 with babyparse
}).catch((err) =>
{
  this.errorMsg = "Fetching error... " + err;
});

После ответа @wajisan он, похоже, работает с "традиционными" вызовами, но не с извлечением файловых вызовов. Я пробовал кое-что с моим Echo api, но безрезультатно... Подробнее там: Обслуживание файлов с помощью Echo (Golang).

Есть идеи, пожалуйста?:)

Источник

2 ответа

Решение

Что ж, поиграл немного больше с настройками axios и сумел заставить его работать (наконец-то!). Я только что создал экземпляр axios, используемый моим магазином, и странная проблема с заголовками исчезла! Я не совсем уверен, почему, но, кажется, из-за некоторых вещей, происходящих в конфигурации по умолчанию Axios между моими вызовами...

Даже если мало что изменилось, новый код магазина:

import axios from "axios";

const state = {
  rawData1: null,
  rawData2: null
};

const api = axios.create({ // Yep, that's the only thing I needed...
  baseURL: "/api"
});

const actions = {
  FETCH_DATA1: ({ commit }) =>
  {
    if (!state.rawData1)
      return api.get("/data1") // Little change to use the axios instance.
      .then((response) =>
      {
        commit("SET_RAW_DATA1", response.data);
      });
  },

  FETCH_DATA2: ({ commit }) =>
  {
    if (!state.rawData2)
      return api.get("/data2") // And there too. Done. Finished. Peace.
      .then((response) =>
      {
        commit("SET_RAW_DATA2", response.data);
      });
  }
};

const mutations = {
  SET_RAW_DATA1: (state, data) =>
  {
    state.rawData1 = data;
  },

  SET_RAW_DATA2: (state, data) =>
  {
    state.rawData2 = data;
  }
};

export default
{
  namespaced: true,
  state,
  actions,
  mutations
};

Надеюсь, что это поможет кому-то!

Источник


Ваш код кажется очень правильным, я думаю, что ваша проблема в API.
Вы должны попробовать с другим, просто чтобы убедиться:)

Источник
Другие вопросы по тегам