關於vue axios不能發送數組問題

本文轉載自查看原文 2020-01-08 09:54 1286

和后台對接數據時候遇到一個問題，怎么也發送不了數組，剛開始以為是因為參數是一個json對象的原因，這個問題調試了一下午，到第二天早上才發現可能是數組原因，

於是乎，解決了，利用URLSearchParams對象解決

 let params = new URLSearchParams();
        params.append('dataName', this.activeName);
        params.append('dataBody',JSON.stringify(this.searchTableItemSave));

URLSearchParams是什么？

URLSearchParams 接口定義了一些實用的方法來處理 URL 的查詢字符串，調用new URLSearchParams()會返回一個 URLSearchParams 對象實例

接口方法

append(name, value):插入一個指定的鍵/值對作為新的搜索參數。
其中name是需要插入搜索參數的鍵名，value是需要插入搜索參數的對應值。

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));

//添加第二個foo搜索參數。
params.append('foo', 4);
params.toString();
// 'foo=1&bar=2&foo=4'

delete(name):從搜索參數列表里刪除指定的搜索參數及其對應的值。
name是需要刪除的鍵值名稱。

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));

//添加第二個foo搜索參數。
params.delete('foo');
params.toString();
// 'bar=2'

entries():返回一個iterator可以遍歷所有鍵/值對的對象。

// 創建一個測試用 URLSearchParams 對象
let searchParams = new URLSearchParams("key1=value1&key2=value2");

// 顯示鍵/值對
for(var pair of searchParams.entries()) {
   console.log(pair[0]+ ', '+ pair[1]); 
}

// key1, value1
// key2, value2

delete(name):從搜索參數列表里刪除指定的搜索參數及其對應的值。
name是需要刪除的鍵值名稱。

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));

//添加第二個foo搜索參數。
params.delete('foo');
params.toString();
// 'bar=2'

entries():返回一個iterator可以遍歷所有鍵/值對的對象。

// 創建一個測試用 URLSearchParams 對象
let searchParams = new URLSearchParams("key1=value1&key2=value2");

// 顯示鍵/值對
for(var pair of searchParams.entries()) {
   console.log(pair[0]+ ', '+ pair[1]); 
}

// key1, value1
// key2, value2

get(name):獲取指定搜索參數的第一個值。
name是將要返回的參數的鍵名。返回一個USVString；如果沒有，則返回null。
如果一個頁面的URL是 https://example.com/?name=Jonathan&age=18 ，你可以這樣解析參數name和age:

let params = new URLSearchParams(document.location.search.substring(1));
let name = params.get("name"); // is the string "Jonathan"
let age = parseInt(params.get("age"), 10); // is the number 18

// 查找一個不存在的鍵名則返回 null:
let address = params.get("address"); // null

getAll(name):獲取指定搜索參數的所有值，返回是一個數組。
name是返回的參數的名稱。

let url = new URL('https://example.com?foo=1&bar=2'); 
let params = new URLSearchParams(url.search.slice(1)); 

//為foo參數添加第二個值 
params.append('foo', 4);

console.log(params.getAll('foo'))' //輸出 ["1","4"].

has(name):返回 Boolean 判斷是否存在此搜索參數。
name 是我們要查詢的參數的鍵名。

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));

params.has('bar') === true; //true

keys():返回iterator 此對象包含了鍵/值對的所有鍵名。

// 建立一個測試用URLSearchParams對象
let searchParams = new URLSearchParams("key1=value1&key2=value2"); 

// 輸出鍵值對
for(var key of searchParams.keys()) { 
  console.log(key); 
}

// key1
// key2

set(name, value):設置一個搜索參數的新值，假如原來有多個值將刪除其他所有的值。
其中name是需要插入修改參數的鍵名，value是需要插入搜索參數的新值。

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));

//Add a third parameter.
params.set('baz', 3);

sort(): 按鍵名排序。

// Create a test URLSearchParams object 
let searchParams = new URLSearchParams("c=4&a=2&b=3&a=1"); 

// Sort the key/value pairs
searchParams.sort();

// Display the sorted query string
console.log(searchParams.toString());

// a=2&a=1&b=3&c=4

toString():返回搜索參數組成的字符串，可直接使用在URL上。

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));

//Add a second foo parameter.
params.append('foo', 4);
console.log(params.toString());
//Prints 'foo=1&bar=2&foo=4'.

values():返回iterator 此對象包含了鍵/值對的所有值。

// 創建一個測試用URLSearchParams對象
let searchParams = new URLSearchParams("key1=value1&key2=value2");

// 輸出值
for(var value of searchParams.values()) {
  console.log(value);
}