Vue Как отправить такой запрос на api?

Question

[Dos]

Как отправить запрос на api из vue. Запрос выглядит так:
api/events?filter[filter]=123&page=5&sort=-date

Пытаюсь отправить на vue

this.$axios.$get('events', { params: {filter: this.filter.q, page: this.pagination.page, sort: this.sort});

Получается: ?filter={"filter":123}
А нужно ?filter[filter]=123

Comments

[alex]

Причем тут вообще Vue??

[Dos]

Alex, это js?

[alex]

pro-dev, какое отношение Vue к axios имеет? Вы теги неправильные вопросу даёте. Например я чекаю вопросы по Вью, а мне тут какой-то axios попался

Answer 1

[WinPooh32]

axios использует эту библиотеку ( и про это написано в README библиотеки, поэтому читайте документацию) для серилизации параметров, вот пример того, что вы хотите получить:

var unencoded = qs.stringify({ a: { b: 'c' } }, { encode: false });
assert.equal(unencoded, 'a[b]=c');

Ваши параметры должны быть такими:

{
 params: {
    filter: {filter: this.filter.q},
 },
 paramsSerializer: function (params) {
     return Qs.stringify(params, {arrayFormat: 'brackets', encode: false})
 },
}

Comments

[Dos]

что-то я поторопился с решением.. Проверил вот это и ничего не дало

{
 params: {
    filter: {filter: this.filter.q},
 },
 paramsSerializer: function (params) {
     return Qs.stringify(params, {arrayFormat: 'brackets', encode: false})
 },
}

точно так?

[WinPooh32]

pro-dev, покажите свой код. И что у вас не работает? Такой же результат выдает?

Вот мой код, и тут все работает.

[Dos]

WinPooh32,
Сам инпут

<b-input
          type="search"
          v-model="q"
          placeholder="Поиск..."
          @keydown.enter="search"
          autofocus
        />

Скрипт:

async created() {
      await this.getAll({
        page: this.$route.query.page,
        filter: this.$route.query.q,
        sort: this.$route.query.sort
      })
    },

Хранилище:

async getAll({commit}, { page, filter = null, sort = null}) {
    const res = await this.$axios.$get('events', {
      params: {
        page: page,
        filter: filter,
        sort: sort
      }
    });
    commit('SET_EVENTS', res.items)
  },

настройки:

['@nuxtjs/axios', {
      baseURL: 'http://127.0.0.1:8000/api',
      paramsSerializer: function (params) {
        return Qs.stringify(params, {arrayFormat: 'brackets', encode: false})
      },
    }],

И что у вас не работает? Такой же результат выдает?

Не работает именно фильтрация из поля input. Не может распарсить такой запрос. page и sort работает

[WinPooh32]

pro-dev, я не вижу код, который я предложил. Или вы мне скинули как было раньше?
Я же хочу посмотреть, как вы воспользовались ответом :)

[WinPooh32]

pro-dev, должно быть так:
filter: {filter: this.$route.query.q},

А вы уверены, что encode: false нужен вам на всех запросах?

[Dos]

А вы уверены, что encode: false нужен вам на всех запросах?

Если делаю прямо в store, то ошибка:
index.js?8535:43 Uncaught (in promise) ReferenceError: qs is not defined

Я пробовал даже без посредников так:

const res = await this.$axios.$get('events', {
      params: {
        filter: { filter: 123 },
      }
    });

Запрос прилетает такой

http://127.0.0.1:8000/api/events?filter=%7B%22filter%22:123%7D

А должен быть:

http://127.0.0.1:8000/api/events?filter[filter]=123

[WinPooh32]

Если делаю прямо в store, то ошибка:
index.js?8535:43 Uncaught (in promise) ReferenceError: qs is not defined

Так подключите:
const qs = require("qs");

127.0.0.1:8000/api/events?filter=%7B%22filter%22:123%7D

Все правильно, потому что символы [ ] кодируются. Чтобы так не было, нужно переопределить paramsSerializer с параметром encode: false.

[Dos]

WinPooh32, точно ведь получилось))))) Это я накосячил.
Можете подсказать ещё такой момент как лучше делать динамическую фильтрацию и сортировку в vuex?

Метод получился такой:

async getAll({commit}, { page, filter, sort}) {
    const res = await this.$axios.$get('events',  {
      params: {
       page: page,
       filter: { filter: filter },
       sort: sort,
      },
      paramsSerializer: function (params) {
        return qs.stringify(params, {arrayFormat: 'brackets', encode: false})
      },
    });
    commit('SET_EVENTS', res.items)

А вот как лучше обрабатывать это в компоненте что-то опять затормозил

[WinPooh32]

pro-dev, про фильтрацию не понял вопрос. По-моему сортировку лучше сделать перед коммитом.

[Dos]

WinPooh32,

По-моему сортировку лучше сделать перед коммитом.

У меня как раз перед коммитом.

Вопрос как мне лучше передавать данные из сортировки? Сейчас у меня при обновлении страницы всё хорошо.

async created() {
      await this.getAll({
        page: this.$route.query.page,
        filter: this.$route.query.q,
        sort: this.$route.query.sort
      })
    },

Единственное напрягает, что метод created загружает страницу, а потом данные. Немного не красиво смотрится. Я раньше использовал

async fetch({store, params}) {
      await store.dispatch('events/getAll');
    }

При таком случае загрузка страницы после загрузки данных.

Получаю из строки. А вот как при нажатии enter фильтровать по поиску и при переходе на другую страницу обновлять стор используя новый запрос

[WinPooh32]

Единственное напрягает, что метод created загружает страницу, а потом данные. Немного не красиво смотрится.

Отрисовывайте страницу на сервере, тогда пользователь не будет видеть этап заполнения данными. Да и это ускорит отображение контента на странице.

Получаю из строки. А вот как при нажатии enter фильтровать по поиску и при переходе на другую страницу обновлять стор используя новый запрос

Используйте watchQuery.