vueでget要求がどのように配列パラメータを伝達するかの方法例

前書き：vueでバックエンドとデータのインタラクションを行う場合、axiosを使って要求を送信し、構成を直接get要求して配列タイプパラメータを伝達しない場合、バックエンドはデータを受信できないので、axiosのいくつかの簡単な構成が後端を完璧な受信配列にする必要があります。
1、問題
サンプルコード

let params = {
        statusList: ['OVERDUE', 'DELAY']
       }
       
this.$http.get('/list', params)
      .then(res => {})
      .catch(e => {})

上記のコードは配置をしない時に要求情報は：／list？status List[]=OVERDU&status List[]=DELAYがバックエンドにとって、status List[]形式の提出は無効で、実際に必要なのは/list？status List=OVERDU&status List=DELAYの提出です。じゃ、私たちはどうやってこの問題を解決しますか？
2、解決策
2.1 qsプラグイン
Qsは主に安全性のあるクエリー文字列解析と逐次化文字列のライブラリを追加します。Qsのより多くの使用方法は総括に提供されたアドレス学習を参照することができます。

1、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
//     ：'a[0]=b&a[1]=c'
2、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
//     ：'a[]=b&a[]=c'
3、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
//     ：'a=b&a=c'
4、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
//     ：'a=b,c'

上記のように、qsにおけるプロローグのいくつかの構成を列挙しました。その中で、「arrayFormat:'repeat'」のプロローグ結果は私たちの条件を満たしています。
2.2 axios配置
axiosの中には、データをプログレッシブにするための設定属性があります。params Serializer。

 paramsSerializer: function(params) {
  return Qs.stringify(params, {arrayFormat: 'repeat'})
 },

2.3具体的な配置
私たちはaxios要求ブロックにおいてパラメータを逐次配置することができます。

axios.interceptors.request.use(async (config) => {
//   get       
 if (config.method === 'get') {
  config.paramsSerializer = function(params) {
   return qs.stringify(params, { arrayFormat: 'repeat' })
  }
 }
}

3、まとめ
axios中国語の文書
qsプラグイン
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。