axios 中 qs 的使用

場景：
在看代碼的時候看到如下代碼的時候，碰到兩個問題，一個是這個請求的寫法，第二個就是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)