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

所以它只是不工作。看看这个问题：使用 axios 在 GET 中将带有多个值的参数的对象作为查询字符串传递

但是想不通，他是怎么解决这个问题的。

Answer 1

您可以使用 AxiosparamsSerializer来自定义请求中参数的序列化。

请注意，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]
        }
      });

      // ...
    }
  }
}

演示