API傳遞陣列的方法分享，搭配Axios與qs，讓專案更好維護！

@Craig Adderley

若你的專案是使用 Axios 作為管理API的工具，那麼未來有天你可能會遇到「想要傳陣列資料給後端」或是「後端要求傳遞數組資料」的狀況，以下提供你幾種解決方式，選擇適合你的吧！

前提

一般來說，呼叫API傳遞參數，通常是一個Key一個Value，像是String、Boolean 或 Number這類的，但是當你想要傳遞Array這個型態的資料時就會遇到這個問題。

// 先不管其他的，讓我們呼叫API看看結果​
axios({
  method: 'get',
  url: 'api',
  params: {
    currency:['c1','c2']
  }
});

// 傳出去的結果
api?currency[]=c1&currency[]=c2

後端收到 currency[]=c1&currency[]=c2，可能會跟你說他不能用或者是說他還要再處理資料等等的狀況，這時候可能會要求你重新處理。那麼就需要溝通，後端想要收到什麼樣子的資料，這邊列出兩種給前端夥伴參考：
（又或者你的後端夥伴覺得他處理就好可能今天你就不會看到這篇文章了XD）

（1） currency=c1&currency=c2

（2）"['c1','c2']"

這兩種解決方式都可以，你們講好就行囉！

解決方法➊：使用qs套件

蠻完善的處理方式，因為套件提供Array格式非常多，你可以選擇你需要的。

第一步：下載 npm qs

npm i qs
import qs from 'qs'​

第二步：在 Axios 使用

// 使用 paramsSerializer + qs轉換格式
axios({
  method: 'get',
  url: 'api',
  params: {
    currency:['c1','c2']
  }
  paramsSerializer: params => {
      return qs.stringify(params, { arrayFormat: 'repeat' })
  }})
});

// 最後傳出去的結果
// 後端會收到 currency = 'c1' 和 currency = 'c2'
api?currency=c1&currency=c2

• qs 提供 Array 傳遞的格式

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'

解決方法➋：將陣列轉成字串

簡單暴力的方法，但是後端需要自己再將資料拆解出來。

axios({
  method: 'get',
  url: 'api',
  params: {
    currency: JSON.stringify(['c1','c2'])
  }
});

// 最後傳出去的結果
// 後端會收到 currency="['c1','c2']"
api?currency=['c1','c2']

結語

今天提供了兩種處理方式給各位工程師參考，方法有很多種只要可以解決問題，雙方也都好處理那就好囉！如果你遇到任何問題也可以在下方留言，若我有空會回覆的:D