axios传参问题：将一个对象转成queryString

最近在做vue + axios项目的时候，遇到了一个axios传参的问题。

以下是一个我在使用axios中get方法调用后台数据的示例：

getDetailInformation () {
    let query = {
        userId : 100001,
        userName: "cynthia"
    }
    axios.get('/project/getRequestDetail.spr', {params: query}, {headers:{'Content-type':'application/x-www-form-urlencoded'}})
        .then((res) => {
            console.log("从后台接口成功获取到的数据", res)
        })
        .catch((err) => {
            console.log("接口调用失败");
        })
}

在这个方法中，调用后台接口传递的参数是一个对象，在浏览器实际显示调用这个接口的参数是这样的：

{
    "params": {
        "userId": "100001",
        "userName": "cynthia"
    }
}

但是，后台希望接收到的实际的参数则是这个样子的：

userId=10001
userName=cynthia 

或：userId=10001&userName=cynthia （view source）

也就是一个Form Data的形式，所以上面简单的 {params: query} 这种传参就有问题了，需要对传递的参数进行转换。

而我在解决这个参数形式的问题，就是写一个toQueryString的方法，以下就是实现的一个转换方法：

function cleanArray(actual) {
  const newArray = [];
  for (let i = 0; i < actual.length; i++) {
    if (actual[i]) {
      newArray.push(actual[i]);
    }
  }
  return newArray;
}
// 将一个对象转成QueryString
function toQueryString(obj) {
  if (!obj) return "";
  return cleanArray(
    Object.keys(obj).map(key => {
      if (obj[key] === undefined) return "";
        return encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]);
    })
  ).join("&");
}

然后再次调用接口的时候：

getDetailInformation () {
    let query = {
        userId : 100001,
        userName: "cynthia"
    }
    axios.get('/project/getRequestDetail.spr', toQueryString(query), {headers:{'Content-type':'application/x-www-form-urlencoded'}})
        .then((res) => {
            console.log("从后台接口成功获取到的数据", res)
        })
        .catch((err) => {
            console.log("接口调用失败");
        })
}

这样就可以给后台传递正确的参数：

 userId=10001
 userName=cynthia 

至此，axois传参遇到的一个小问题就解决啦~

PS ： 感谢阅读，如果有更好的办法，可以互相交流一下鸭~