axios 中 qs 的使用

qs

  • 一、请求写法
  • 二、qs
      • 1. 对比
      • 2. 使用

场景:
在看代码的时候看到如下代码的时候,碰到两个问题,一个是这个请求的写法,第二个就是qs;

// request 就是 axios 对象
export function getVerifyCode(telephone) {
  return request({
    url: '/......',
    method: 'post',
    data: qs.stringify({
      PhoneNumber: telephone,
    }),
  });
}

一、请求写法

之前使用 axios请求数据,写法都是下边这种的;

axios.post('url', 
	{
		key: val
	})
	.then((res)=>{
		console.log(res)
	})
	.catch((error)=>{
		console.log(error)
	})

后来查了一下文档,发现是有这种写法的;

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

// 发送 GET 请求(默认的方法)
axios('/user/12345');

二、qs

看到 qs.stringify() 这个方法,我第一时间想到的是 JSON.stringify()

1. 对比

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

JSON是正常类型的JSON,请对比一下输出;

var a = {name:'hehe',age:10};

qs.stringify(a)
// 'name=hehe&age=10'

JSON.stringify(a)
// '{"name":"hehe","age":10}'

2. 使用

步骤:

1、首先先下载:

npm i qs 

2、然后引入 :

import qs from 'qs'

3、qs主要有两个方法 :

方法一:将对象序列化,多个对象之间用&拼接(拼接是由底层处理,无需手动操作)

qs.stringify()    转换成查询字符串
let comments = {content: this.inputValue}
let comValue = qs.stringify(comments)

方法二:将序列化的内容拆分成一个个单一的对象

qs.parse() 转换成json对象
 
let comValue = qs.parse(comments)

你可能感兴趣的:(前端开发)