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.reibang.com/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);
