Axios несколько значений (через запятую) в параметре

Question

Ожидаемая строка запроса:

http://fqdn/page?categoryID=1&categoryID=2

Запрос получения Axios:

fetchNumbers () {
  return axios.get(globalConfig.CATS_URL, {
    params: {
      ...(this.category ? { categoryId: this.category } : {})
    }
  })
    .then((resp) => {
      // console.log(resp)
    })
    .catch((err) => {
      console.log(err)
    })
}

Как видите, он отлично работает только с 1 значением для 1 параметра, но если бы я хотелсделать несколько значений - это не работает, я пытался использовать массив:

...(this.category ? { categoryId: [1, 2] } : {})

Но он возвращает этот путь:

http://fqdn/page?categoryID[]=1&categoryID[]=2

Так что это просто не работает.Посмотрел эту проблему: Передача объекта с параметром с несколькими значениями в виде строки запроса в GET с использованием axios

Но не могу понять, как он решил эту проблему.

Answer 1

Вы можете использовать Axios paramsSerializer для настройки сериализации параметров в запросе.

Обратите внимание, что URLSearchParams сериализует данные массива так, как выВы ожидаете:

const searchParams = new URLSearchParams();
searchParams.append('foo', 1);
searchParams.append('foo', 2);
console.log(searchParams.toString()); // foo=1&foo=2

Таким образом, вы можете использовать этот класс в paramsSerializer следующим образом:

// my-axios.js
export default axios.create({
  paramsSerializer(params) {
    const searchParams = new URLSearchParams();
    for (const key of Object.keys(params)) {
      const param = params[key];
      if (Array.isArray(param)) {
        for (const p of param) {
          searchParams.append(key, p);
        }
      } else {
        searchParams.append(key, param);
      }
    }
    return searchParams.toString();
  }
});

// Foo.vue
import axios from './my-axios.js';

export default {
  methods: {
    async send() {
      const { data } = await axios({
        url: '//httpbin.org/get',
        params: {
          categoryId: [1, 2, 3]
        }
      });

      // ...
    }
  }
}

демо

Answer 2

Это не проблема, связанная с axios.Это зависит от того, способен ли ваш бэкэнд-сервис понимать параметры запроса таким образом (кажется, зависит от фреймворка).От вашего вопроса, я думаю, что это не работает, когда queryParams, как показано ниже, отправляются

?categoryID[]=1&categoryID[]=2

и он ожидает

?categoryID = 1,2

Что вы можете сделать, это преобразовать массив в такую ​​строку перед ее передачейдля параметров в axios.Обновите следующий фрагмент в своем коде, и он должен решить вашу проблему.

...(this.category ? { categoryId: this.category.join(',') } : {})

Взгляните на следующий поток

Как передать массив в строке запроса?