1. 程式人生 > >vue使用axios的post提交方式,引數為陣列

vue使用axios的post提交方式,引數為陣列

做專案時,axios提交post請求 ,控制檯報錯,看圖

意思大概就是我們url不能解析,沒有序列化吧也就是,當然不能傳送成功。這是我寫的url

Axios.post('/api/order/create?token=' + token + '&goodsJsonStr=' + shopping
      ).then(res => {
        console.log(res);
      })

 url 中的shopping為一個數組 

let shopping = [
        {
          'goodsId': id,
          'goodsName': basicInfo.name,
          'number': num,
          'originalPrice': basicInfo.originalPrice,
          'propertyChildIds': guigecc.id + ':' + guigec.id ,
          'logisticsType':0
        },
        {
          'goodsId': id,
          'goodsName': basicInfo.name,
          'number': num,
          'originalPrice': basicInfo.originalPrice,
          'propertyChildIds': guigecc.id + ':' + guigec.id ,
          'logisticsType':0
        }
    ]

  在查閱各種資料,各種文件後發現qs對引數進行序列化方式是最方便的.

其中qs模組是一件封裝進axios模組裡了。我們直接在需要的地方引用就可以了

import Qs from 'qs'

開始用的是JSON.stringify(),這個是眾所周知的物件型別轉換為字串,然而在url中並沒有很好的和原先的拼接;而qs.stringify()將物件 序列化成URL的形式,以&進行拼接。JSON是正常型別的JSON,請對比一下輸出

例如:

var a = {name:'hehe',age:10};
 qs.stringify(a)
// 'name=hehe&age=10'
JSON.stringify(a)
// '{"name":"hehe","age":10}'