npm 中 qs库的介绍与使用

凩晨
10,582 阅读2分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

在前端开发过程中，必不可少的就是前后端的数据交付，在此肯定是要使用网络请求的。

而axios则是咱们常使用的请求库了，同时在网络请求时传递的参数也会做一些处理。

下面一起来了解下使用比较多的qs库吧！

1、 axios

Axios，是一个基于promise的网络请求库，作用于node.js和浏览器中。

在服务端它使用原生node.js模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。

axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。

image.png

2、 qs介绍

qs是npm的一个库。里面的stringify() 方法可以将一个json对象直接转为以？和&符连接的形式。

ajax请求中的get请求是通过URL传参的（以？和&符连接），而post请求大多是通过json传参的。

在开发中，发送请求的入参大多是一个对象，在发送时，如果请求为get，就需要对参数进行转化。

3、 qs的使用

qs库有两个常用的方法： qs.parse() 和 qs.stringify()

引入Qs，这个库是axios里面包含的，不需要再下载了

  • qs.parse()

qs.parse() 将URL解析成对象的形式

const Qs = require('qs');

let url = 'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0';

Qs.parse(url);

console.log(Qs.parse(url));
  • qs.stringify()

qs.stringify() 将对象序列化成URL的形式，以&进行拼接

const Qs = require('qs');

let obj= {

    method: "query_sql_dataset_data",

    projectId: "85",

    appToken: "7d22e38e-5717-11e7-907b-a6006ad3dba0",

    datasetId: " 12564701"

};

Qs.parse(url);

console.log(Qs.parse(url));

4、 JSON中stringify 的区别

JSON中同样存在stringify方法，但是两者之间的区别是很明显的，如下所示：

JSON.stringify()

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

qs.stringify()

uid=cs11&pwd=000000als&username=cs11&password=000000als

前者是采用JSON.stringify(param)进行处理，后者是采用Qs.stringify(param)进行处理的

5、 传递数组的情况

方法一：

qs.stringify({ a: ['b', 'c', 'd'] }); 

// 'a[0]=b&a[1]=c&a[2]=d'

方法二：

qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false }); 

// 'a=b&a=c&a=d'

方法三：通过arrayFormat 选项进行格式化输出

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 'a=b&a=c'
avatar
文章
阅读
粉丝