业务需求
下载接口需要把参数拼接到接口地址上发给后端。
把 { orderId:156, typeId:984 } 处理成 http://test.com/download?orderId=156&typeId=984
方法一 使用for循环
首先,函数从环境变量 VUE_APP_BASE_API 中获取基本的 API 地址,并将其赋值给 baseUrl 变量。接下来,通过拼接传入的 url 参数和问号字符,构建了 expurl 变量。
然后,使用循环遍历传入的 query 对象的属性。在每次循环中,将属性名和属性值以 key=value 的形式拼接到 queryStr 字符串中。如果当前属性不是最后一个属性,那么也要拼接上 & 字符。
最后,将 queryStr 拼接到 expurl 后面,得到最终的导出 URL,并将其返回给调用方。
function getExportUrl2(url, query) {
let baseUrl = process.env.VUE_APP_BASE_API;
// 非本地环境的BASE_API为比如为“/api”,如果proxy代理不能去掉重复的api,要手动去掉,添加以下代码
// if (process.env.VUE_APP_BASE_API.toString().indexOf("http://10.0") == -1) {
// baseUrl = "";
// }
let expurl = baseUrl + url + "?";
let queryStr = "";
const keys = Object.keys(query);
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
queryStr += key + "=" + query[key];
if (i !== keys.length - 1) {
queryStr += "&";
}
}
expurl += queryStr;
return expurl;
}
方法二 借助qs(querystring) 库
qs是一个npm仓库所管理的包,主要用来处理url地址。
qs主要有两个方法:
- qs.stringify()是将对象序列化成url的形式,以&拼接。
- qs.parse()是将url解析成对象的形式
将参数序列化成url的形式用到的是qs.stringigy()。
安装
npm install qs --save
使用
import qs from 'qs'
let urlObj = {
orderNo:'8899665',
type:'23'
}
let url = qs.stringify(urlObj)
console.log(url) //'orderNo=8899665&type=23'
let requestUrl = '/test/list'
const paramStringify = Qs.stringify(params)
this.$request.post(requestUrl,paramStringify).then(({code,data,message}) => {
if(code == 200){
this.$message.success('修改成功')
}else{
this.$message.error(message)
}
})