Axiosアレイ転送


http:localhost/user/view?id=2&id=6&=5というAPIアドレスがある場合.そのアドレスを一般的な観点から解析すると,id値が2,6,5であるユーザを予測できる.
これにより,サーバ側はこの値をaxiosのパラメータとしてサーバに送信する必要があるが,毎日手動で入力して送信するとid値が増加すると耐えられない.たとえば、http:localhost/user/view?id=2&id=6&=5&id=11&id=166&id=232&id=676...のような長いurlを生成する必要がある場合があります.だから私が三七二十一を気にせずこのように送ったら、

// 요청
axios({
    url: '/user/view',
    mehtod: 'GET',
    params: {
        id: [2, 6, 5]
    }
})
次のように応答します.
// 응답
http://localhost/user/view?id[]=1&id[]=6&id[]=5 (400 Bad Request)

解決する


qsモジュールを需要として受け入れ、axiosが提供するparamSerializerを利用すればよい.
const qs = require('qs');

axios({
	url: '/user/view',
	method: 'GET',
	params: {
		id: [1, 6, 5]
	},
	paramSerializer: params => {
		return qs.stringify(params, { arrayFormat: 'repeat'})
	}
})
paramsSerializer
// `paramsSerializer`는`params`를 직렬화(serializing) 하는 옵션 함수입니다.
// (예: https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function (params) {
  return Qs.stringify(params, {arrayFormat: 'brackets'})
}
https://yamoo9.github.io/axios/guide/api.html#%EA%B5%AC%EC%84%B1-%EC%98%B5%EC%85%98
ArrayFormatオプション
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 'a=b&a=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 'a=b,c'
https://www.npmjs.com/package/qs