Axios参数中的多个值(逗号分隔)

6tr1vspr  于 2023-04-20  发布在  iOS
关注(0)|答案(3)|浏览(215)

预期查询字符串:

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中传递一个带有多个值的参数的对象作为查询字符串
但想不出,他是怎么解决这个问题的。

hl0ma9xz

hl0ma9xz1#

您可以使用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]
        }
      });

      // ...
    }
  }
}

demo

dwbf0jvd

dwbf0jvd2#

这不是一个axios相关的问题。这取决于您的后端服务是否能够以这种方式理解查询参数(似乎是框架相关的)。从您的问题中,我认为当发送像下面这样的queryParams时,它不起作用

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

它期望

?categoryID = 1,2

你可以做的是将数组转换成这样的字符串,然后将其传递给axios中的params。更新代码中的以下部分,它应该可以解决你的问题。

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

看看下面的帖子
How to pass an array within a query string?

pieyvz9o

pieyvz9o3#

如果你在这里寻找如何实现逗号分隔的值,像这样:
?size=4&sort=modifiedOn,name
这样做:

const http = axios.create({

  paramsSerializer: params => new URLSearchParams(params).toString()

})

http.get('/users', {
  params: {
    size: 4,
    sort: ['modifiedOn', 'name']
  }
})

序列化查询字符串中的结果:
?size=4&sort=modifiedOn%2Cname

相关问题