axios 傳參數(shù)qs一些格式

qs處理url參數(shù)

qs.parse 方法可以把一段格式化的字符串轉(zhuǎn)換為對(duì)象格式，比如

let url = 'http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e';
let data = qs.parse(url.split('?')[1]);

// data的結(jié)果是
{
    a: 1, 
    b: 2, 
    c: '', 
    d: xxx, 
    e: ''
}

qs.stringify 則和 qs.parse 相反，是把一個(gè)參數(shù)對(duì)象格式化為一個(gè)字符串。

let params = { c: 'b', a: 'd' };
qs.stringify(params)

// 結(jié)果是
'c=b&a=d'

甚至可以對(duì)格式化后的參數(shù)進(jìn)行排序：

qs.stringify(params, (a,b) => a.localeCompare(b))

// 結(jié)果是
'a=b&c=d'

指定數(shù)組編碼格式

let params = [1, 2, 3];

// indices(默認(rèn))
qs.stringify({a: params}, {
    arrayFormat: 'indices'
})
// 結(jié)果是
'a[0]=1&a[1]=2&a[2]=3'

// brackets 
qs.stringify({a: params}, {
    arrayFormat: 'brackets'
})
// 結(jié)果是
'a[]=1&a[]=2&a[]=3'

// repeat
qs.stringify({a: params}, {
    arrayFormat: 'repeat'
})
// 結(jié)果是
'a=1&a=2&a=3'

處理json格式的參數(shù)
在默認(rèn)情況下，json格式的參數(shù)會(huì)用 [] 方式編碼，

let json = { a: { b: { c: 'd', e: 'f' } } };

qs.stringify(json);
//結(jié)果 'a[b][c]=d&a[b][e]=f'

但是某些服務(wù)端框架，并不能很好的處理這種格式，所以需要轉(zhuǎn)為下面的格式

qs.stringify(json, {allowDots: true});
//結(jié)果 'a.b.c=d&a.b.e=f'

引用：https://www.cnblogs.com/small-coder/p/9115972.html
需要注意的是：與JSON.stringify()的區(qū)別

    如：JSON.stringify({"a": "1", "b": "2"})        結(jié)果為：'{"a": "1", "b": "2"}'

           而qs.stringify({"a": "1", "b": "2"})            結(jié)果為：'a=1&b=2'

axios傳遞數(shù)組參數(shù)

get / delete請(qǐng)求方式解決方式如下

axios.get(url, {
    params: {
     ids: [1,2,3],
     type: 1
    },
    paramsSerializer: params => {
      return qs.stringify(params, { indices: false })
    }})

axios.delete(url, {
     params: {
     ids: [1,2,3],
     type: 1
    },
    paramsSerializer: params => {
      return qs.stringify(params, { indices: false })
    }})

post / put 請(qǐng)求方式解決方式如下

axios.post(url, qs.stringify(
    params: {
     ids: [1,2,3],
     type: 1
    }, { indices: false }))

 axios.put(url, qs.stringify(params: {
     ids: [1,2,3],
     type: 1
    }, { indices: false }))

url結(jié)果：

url?ids=1&ids=2&id=3

qs.stringify({ids: [1, 2, 3]}, { indices: false })
 //形式： ids=1&ids=2&id=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘indices‘})
 //形式： ids[0]=1&aids1]=2&ids[2]=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘brackets‘})
 //形式：ids[]=1&ids[]=2&ids[]=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘repeat‘}) 
//形式： ids=1&ids=2&id=3

最后，對(duì)axios進(jìn)行了一個(gè)封裝,方便自己使用：

import axios from 'axios'
import qs from 'qs'

let baseurl = 'http://localhost:8081/api'
function getRequest (apiPath, params, successCallback, errorCallback) {
  let url = baseurl + apiPath
 let req = axios.get(url, {
    params: params,
    paramsSerializer: params => {
      return qs.stringify(params, { indices: false })
    }})
  thenResponse(req, successCallback, errorCallback)
}
function postRequest (apiPath, params, successCallback, errorCallback) {
  let url = baseurl + apiPath
  let req = axios.post(url, qs.stringify(params, { indices: false }))
  thenResponse(req, successCallback, errorCallback)
}

function putRequest (apiPath, params, successCallback, errorCallback) {
  let url = baseurl + apiPath
  // var params = new URLSearchParams()
  // params.append('status', 0)
  let req = axios.put(url, qs.stringify(params, { indices: false }))
  thenResponse(req, successCallback, errorCallback)
}

function deleteRequest (apiPath, params, successCallback, errorCallback) {
  let url = baseurl + apiPath
  let req = axios.delete(url, {
    params: params,
    paramsSerializer: params => {
      return qs.stringify(params, { indices: false })
    }})
  thenResponse(req, successCallback, errorCallback)
}

/**
 * 請(qǐng)求結(jié)果處理
 * @param axiosRequest
 * @param successCallback
 * @param errorCallback
 */
function thenResponse (axiosRequest, successCallback, errorCallback) {
  axiosRequest.then((res) => {
    if (res.status === 200) {
      res = res.data
      if (res.code === 0) {
        if (successCallback) successCallback(res)
      } else {
        if (errorCallback) errorCallback(res.code, res.msg)
      }
    }
  }).catch((error) => {
    if (errorCallback) errorCallback(-1, error.message)
  })
}
export { getRequest, postRequest, putRequest, deleteRequest }

//導(dǎo)入封裝axios的js文件
import {getRequest, deleteRequest} from 'utils/api'
//發(fā)送delete請(qǐng)求，帶數(shù)組參數(shù) 與 普通參數(shù)
deleteRequest('/admin/user/del', {
        token: ‘SDFSDIFJSIODFKMSDOFM,SDOPFK’,
        ids: [1,2,3,4,5,6]
      }, function (res) {
        _this.$alert('刪除成功')
      }, function (errcode, errmsg) {
        _this.$alert('code ' + errcode + ' ,meaasge ' + errmsg)
      })
//發(fā)送GET請(qǐng)求
getRequest('/admin/users', {
        status: 0,
        pageNum: this.currentPage,
        pageSize: count,
        token: '111'
      }, function (res) {
        _this.totalPage = res.data.total
      }, function (errcode, errmsg) {
        _this.$alert('code ' + errcode + ' ,meaasge ' + errmsg)
      })

引用：http://www.itdecent.cn/p/68d81da4e1ad

格式1

let  params =  {
    points: [ 
        { lat: 111, lng: 222 }
    ]
};
params = qs.stringify(params); //序列化
image.png

格式2

qs.stringify(params, { arrayFormat: 'indices', allowDots: true })
image.png

格式3 （傳數(shù)組）

image.png

image.png

image.png

修改后
image.png

image.png

image.png

引用：https://blog.csdn.net/weixin_41013537/article/details/89886220

axios 下載文件 設(shè)置 responseType: 'blob' 把文件轉(zhuǎn)化為文件流

axios.get({
    url: 'xxxxxx',
    method: 'get',
    data:{},
    responseType: 'blob'
}).then(res => {
       console.log(res);
    });

參考：https://blog.csdn.net/dongguan_123/article/details/100183284

//formdata格式的post請(qǐng)求
const formData = (url,data) => {
    let formData = qs.stringify(data);
    return service.post(url,formData,{
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then(res => res.data).catch(err => err);
}
//文件上傳
const upLoading = (url,data) => {
    let formData = new FormData();
    Object.keys(data).forEach(key => {
        formData.append(key,data[key])
    })
    return service.post(url,formData,{
        headers: {'Content-Type': 'multipart/form-data'}
    }).then(res => res.data).catch(err => err);
}
//文件下載
const fileDownload = (url,params) => service.get(url,{params,responseType: 'blob'}).then(res => res.data).catch(err => err);

const fileDownloadName = (url,params) => service.get(url,{params,responseType: 'blob'}).then(res => res).catch(err => err);

const fileDownloadPost = (url,params) => service.post(url,params,{responseType: "blob" }).then(res => res).catch(err => err);
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容