Axios + строка запроса

Question

Мне было интересно, как я смогу использовать пакет npm для строки запроса, чтобы облегчить мои вызовы axios. Я использую пакет: https://www.npmjs.com/package/query-string

Пример:

import qs from 'query-string';
import axios from 'axios';

axios.get(`http://localhost:3000/api/products${qs.parse({ offset: 0, limit: 12 })}`);

Не знаю, почему, но это не работает, как ожидалось.

Answer 1

Поскольку нет необходимости использовать строку запроса, поскольку axios делает это автоматически, помещая параметры в запрос.

Но все же, если вы хотите использовать пакет строки запроса, вы можете сделать это следующим образом.

Вот краткий пример, который может дать вам некоторое представление об использовании query-строка .

import qs from 'qs'; (https://www.npmjs.com/package/qs)
import axios from 'axios';

export default axios.create({
    baseURL: `http://localhost:3000/api/products`,
    params: (params) => {
        return qs.stringify(params, {offset: 0, limit: 12});
    },
});

Answer 2

Тебе это не нужно. Axios имеет стандартный способ ввода параметров в ваш запрос без каких-либо дополнительных библиотек или выполнения каких-либо действий вручную.

axios
    .request({
      url: '/some/url',
      method: 'get',
      params: {
        offset: 0,
        limit: 12,
        unknown: '???'
      },
      ...
    })

Должен быть преобразован в /some/url?offset=0&limit=12&unknown=%3F%3F%3F.

Answer 3

Axios предоставляет еще один удобный, но мощный способ отправки вашего queryParams как объекта в метод http GET.

Вы можете изменить свой запрос следующим образом:

axios.get('http://localhost:3000/api/products', {
    params: {
      offset: 0,
      limit: 12
    }
  })

Answer 4

Чтобы использовать шаблонные литералы, вам нужно использовать обратную галочку (), а не обычные кавычки. КОД:

axios.get(`http://localhost:3000/api/products${qs.parse({ offset: 0, limit: 12 })}`);

Если вы не хотите использовать обратные тики, вы не можете использовать синтаксис ${}. Просто сделайте это как обычные операции интерполяции строк.

axios.get(‘http://localhost:3000/api/products'+qs.parse({ offset: 0, limit: 12 })});