axios 传参数qs一些格式

qs处理url参数

qs.parse 方法可以把一段格式化的字符串转换为对象格式，比如

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

// data的结果是
{
    a: 1, 
    b: 2, 
    c: '', 
    d: xxx, 
    e: ''
}

qs.stringify 则和 qs.parse 相反，是把一个参数对象格式化为一个字符串。

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

// 结果是
'c=b&a=d'

甚至可以对格式化后的参数进行排序：

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

// 结果是
'a=b&c=d'

指定数组编码格式

let params = [1, 2, 3];

// indices(默认)
qs.stringify({a: params}, {
    arrayFormat: 'indices'
})
// 结果是
'a[0]=1&a[1]=2&a[2]=3'

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

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

处理json格式的参数
在默认情况下，json格式的参数会用 [] 方式编码，

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

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

但是某些服务端框架，并不能很好的处理这种格式，所以需要转为下面的格式

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

引用：https://www.cnblogs.com/small-coder/p/9115972.html
需要注意的是：与JSON.stringify()的区别

    如：JSON.stringify({"a": "1", "b": "2"})        结果为：'{"a": "1", "b": "2"}'

           而qs.stringify({"a": "1", "b": "2"})            结果为：'a=1&b=2'

axios传递数组参数

get / delete请求方式解决方式如下

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 请求方式解决方式如下

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结果：

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

最后，对axios进行了一个封装,方便自己使用：

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)
}

/**
 * 请求结果处理
 * @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 }

//导入封装axios的js文件
import {getRequest, deleteRequest} from 'utils/api'
//发送delete请求，带数组参数 与 普通参数
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)
      })
//发送GET请求
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)
      })

引用：https://www.jianshu.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 （传数组）

image.png
image.png
image.png
修改后
image.png
image.png
image.png
引用：https://blog.csdn.net/weixin_41013537/article/details/89886220

axios 下载文件 设置 responseType: 'blob' 把文件转化为文件流

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请求
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);