URLSearchParams的用法

這個方法可以將get/post要傳的參數序列化，再通過this.$axios.post(‘api/address’, params)發送請求。
具體的用法如下：

// POST const params = new URLSearchParams(); params.append('name', this.name); params.append('password', this.password); this.$axios.post('api/address', params).then(result => {// success }, error => {// fail }).catch(error => {});// GET const params = new URLSearchParams(str); this.$axios.get('api/address', params).then(result => {// success }, error => {// fail }).catch(error => {});

這里是正常顯示，當然URLSearchParams是有兼容行的，具體可以查看這個網站: https://caniuse.com/

看到get方法可以將參數放在new里，于是我也這么寫：

// POSTconst params = new URLSearchParams({name: this.name, password, this.password});this.$axios.post('api/address', params).then(result => {// success}, error => {// fail}).catch(error => {});

發現低版本的瀏覽器發送的是空的params，兼容行不好。

最后，奉上封裝好的序列化方法，因為URLSearchParams有兼容性，所以就暫時不被考慮了，手寫(大牛的)一個比較靠譜。

function getType(obj) {return Object.prototype.toString.call(obj).replace(/^\[\w+ (\w+)\]$/, '$1').toLowerCase(); } // scope暫時用不上，后面優化 function convert(params, obj, scope) {let type;let array = Array.isArray(obj);let hash = getType(obj) === 'object';Object.keys(obj).forEach(function(key) {let value = obj[key];type = getType(value);if (scope) { key =scope +'[' +(hash || type === 'object' || type === 'array' ? key : '') +']'; }// handle data in serializeArray() formatif (!scope && array) { params.add(value.name, value.value) }// recurse into nested objectselse if (type === 'array' || type === 'object') { serialize(params, value, key) }else { params.add(key, value) }}); } export function serialize(obj) {let params = [];params.add = function(key, value) {if (value == null) value = '';this.push(escape(key) + '=' + escape(value));};convert(params, obj);return params.join('&').replace(/%20/g, '+'); };

要優化點：1、可以序列化merge 2、scope參數

總結

以上是生活随笔為你收集整理的$axios.post 表单序列化 URLSearchParams的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。