1. 程式人生 > >axios傳參問題:將一個物件轉成queryString

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 : 感謝閱讀,如果有更好的辦法,可以互相交流一下鴨~