axios的get方法傳遞數組參數

http的get方法傳遞數組參數有兩種形式

形式一:

通過逗號拼接query參數

http://localhost:8080/api?arr=1,2,3,4&name=1

形式二:

通過數組名+下標指定參數

http://localhost:8080/api?arr[0]=1&arr[1]=2

使用axios的get方法傳遞數組參數

形式一的解決方案

// 這里注意使用+''將參數轉換成了字符串,實際上就是把arr變成了字符串傳出去
const params = {
    arr: [1,2,3,4] + '',
    list: [1,2,3,4]+ ''
}
// 創建axiaos對象,框架中常見的創建方式
const req = axios.create({
      baseURL: process.env.VUE_APP_API_BASE_URL, // api base_url
      timeout: 6000 // 請求超時時間
})
// 創建請求的promise方法,框架中常見的api封裝方式
const queryWayOne = (params) => req({
    url: 'xxx',
    method: get,
    params
})

// 在vue組件中使用
...
created() {
    queryWayOne(params).then(res=>{})
}
...

形式二的解決方案

// 這里沒有轉換成字符串
const param = {
    arr: [1,2,3,4],
    list: [1,2,3,4]
}

// 安裝qs
npm i qs
// 引入qs
import qs from 'qs'
// 在方法中添加paramsSerializer
const queryWayOne = (params) => req({
    url: 'xxx',
    method: get,
    params,
    paramsSerializer: params => qs.stringify(params)
})