最近在做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 ： 感謝閱讀，如果有更好的辦法，可以互相交流一下鴨~