javascript - Cum să folosești corect parametrii axios cu array-uri

Cum să adaugi indici la un array în șirul de interogare?

Am încercat să trimit date astfel:

axios.get('/myController/myAction', { params: { storeIds: [1,2,3] })

Și am obținut acest URL:

http://localhost/api/myController/myAction?storeIds[]=1&storeIds[]=2&storeIds[]=3

Deci, ar trebui să obțin acest URL:

http://localhost/api/myController/myAction?storeIds[0]=1&storeIds[1]=2&storeIds[2]=3

Ce ar trebui să adaug în opțiunile mele de parametri pentru a obține acest URL?

Răspuns #1

Poți folosi paramsSerializer și să serializezi parametrii cu https://www.npmjs.com/package/qs

axios.get('/myController/myAction', {
  params: {
    storeIds: [1,2,3]
  },
  paramsSerializer: params => {
    return qs.stringify(params)
  }
})

Răspunsul #2

Acest comportament a fost adăugat în axios începând cu versiunea 1.0.0. Vezi paramsSerializer.indexes la https://github.com/axios/axios/tree/v1.0.0#request-config

Iată un exemplu folosind codul tău de exemplu:

axios.get('/myController/myAction', {
  params: { storeIds: [1,2,3] },
  paramsSerializer: {
    indexes: true, // use brackets with indexes
  }
)

Parametrii de interogare rezultanți vor avea indecși în interiorul parantezelor:

/myController/myAction?storeIds[0]=1&storeIds[1]=2&storeIds[2]=3

Alte valori paramsSerializer.indexes sunt null (fără paranteze):

axios.get('/myController/myAction', {
  params: { storeIds: [1,2,3] },
  paramsSerializer: {
    indexes: null, // no brackets at all
  }
)
// /myController/myAction?storeIds=1&storeIds=2&storeIds=3

Și valoarea implicită false (paranteze fără indici):

axios.get('/myController/myAction', {
  params: { storeIds: [1,2,3] },
  paramsSerializer: {
    indexes: false, // brackets but no indexes
  }
)
// /myController/myAction?storeIds[]=1&storeIds[]=2&storeIds[]=3

Răspunsul #3

Fără a fi nevoie să adaugi mai multe biblioteci și folosind ES6, ai putea scrie:

axios.get(`/myController/myAction?${[1,2,3].map((n, index) => `storeIds[${index}]=${n}`).join('&')}`);

Răspunsul #4

Mulțumesc foarte mult pentru răspunsul de la Nicu Criste, pentru cazul meu, API-ul necesită parametri astfel:

params: {
  f: {
    key: 'abc',
    categories: ['a','b','c']
   },
  per_page: 10
}

Metoda este GET și această API necesită ca formatul să fie: API?f[key]=abc&f[categories][]=a&f[categories][]=b... Așa că am atribuit paramsSerializer al axios astfel:

config.paramsSerializer = p => {
      return qs.stringify(p, {arrayFormat: 'brackets'})
    }

• Instalați qs, vă rugăm să accesați acest link
• Citește mai multe despre paramsSerializer în documentația axios
• Editați formatul parametrilor: Citiți mai multe în documentul de stringuire qs