vue中qs的兩個方法怎么用

本篇內容主要講解“vue中qs的兩個方法怎么用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue中qs的兩個方法怎么用”吧!

qs的兩個方法是：1、stringify方法，用于將對象序列化成url形式的字符串，以“&”符號進行拼接，語法“qs.stringify(data)”；2、parse方法，用于將URL形式的字符串解析成對象，語法“qs.parse(data)”。

一、qs是什么？

qs 是一個增加了一些安全性的查詢字符串解析和序列化字符串的庫。可以進行對象與字符串之間的一個轉換。

二、qs的安裝

qs，是axios中自帶的，也是npm倉庫所管理的包。

安裝方式：

npm install qs

Vue項目中的導入方式：

import qs from 'qs'

Vue項目中的main.js中設置全局屬性的方式：

Vue.prototype.$qs = qs

三、qs應用場景

使用axios，調用后端接口時使用到的。

請求方式為post，axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urllencoded'，將對象或數組的參數使用qs.stringify()進行序列化轉化

四、qs使用

介紹它的兩個方法：stringify和parse。

qs.stringify(data)

stringify方法，是將對象序列化成url形式的字符串，以&符號進行拼接。

onst Qs = require('qs');
let obj= {
 method: "query_sql_dataset_data",
 projectId: "85",
 appToken: "7d22e38e-5717-11e7-907b-a6006ad3dba0",
 datasetId: " 12564701"
};
Qs.stringify(obj);
console.log(Qs.stringify(obj));

如上面代碼所示,輸出結果如下

{"uid":"cs11","pwd":"000000als","username":"cs11","password":"000000als"}
uid=cs11&pwd=000000als&username=cs11&password=000000als

qs.parse(data)

parse方法，是將URL形式的字符串解析成對象

示例及輸出效果如下:

import qs from 'qs'

const userStr = 'name=xiaoming&password=123456'
//qs.parse(userStr)
console.log('轉換后的格式：',qs.parse(userStr))

// Object{
//          name:'xiaoming',
//          password:'123456'
//        }

五、qs與JSON的區別

一直不太了解qs與JSON到底有什么區別？！網上仔細查了一下，總結如下：

到此，相信大家對“vue中qs的兩個方法怎么用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！