| 不同版本接口區別 | 老版本接口(form形式) | 新版本接口(json形式) |
|---|---|---|
| 請求頭 | application/x-www-form-urlencoded | application/json;charset=UTF-8 |
| 參數格式 | 序列化字符串: key1=value1&key2=value2 |
json格式字符串 :{key1:value1} |
| 接口請求頭和參數錯誤提示 | (1)服務器返回：參數錯誤 (2)狀態碼400 |
(1)服務器返回：參數錯誤 (2)狀態碼400 (3)跨域報錯 |
-
1.老版本的後臺接口post請求頭是：
application/x-www-form-urlencoded-
axios不支持
-
解決方案
-
1.設置axios請求頭爲
application/x-www-form-urlencoded-
headers: {'Content-type': 'application/x-www-form-urlencoded'}
-
-
2.將參數拼接爲：key1=value1&key2=value2
- 使用qs第三方包來拼接：
Qs.stringify({username: 'zxk'})- qs網站：https://www.npmjs.com/package/qs
- 使用qs第三方包來拼接：
-
-
-
2.新版本的後臺接口post請求頭是：
application/json;charset=UTF-8- axios默認支持，不需要任何處理
/*
1.學習目標介紹 ： axios解決post請求兼容性問題
2.學習路線 ：
(1)post請求頭類型
a.在很久很久以前，ajax技術沒有發明以前，瀏覽器發送請求
使用的是form表單來發送，form表單默認的請求頭是：application/x-www-form-urlencoded
b.後來ajax技術發明之後，由於之前的服務器處理post請求都是按照表單的默認請求頭方式來處理
所以，ajax發送post請求，一般也設置請求頭爲：application/x-www-form-urlencoded
c. axios技術發明之後，此時json數據格式傳輸已經越來越流行，所以在axios中
post請求默認的請求頭是：'Content-Type: application/json;charset=UTF-8'
d. 不同的請求頭，服務器在處理的時候方式不一樣。所以前後端必須要統一
總結：
a. 老接口的post請求頭是：application/x-www-form-urlencoded
這種方式參數會以： 'key1=value1&key2=value2'形式傳輸
後臺處理方式：字符串切割獲取參數
b. 新接口的post請求頭是: application/json;charset=UTF-8
這種方式參數會以json格式傳輸： '{"key":"value"}'
這種方式處理：JSON.parse()解析
(2)axios解決post請求兼容性
a. 如果你的後臺是新接口，則不需要任何處理。（axios默認json格式）
b. 如果你的後臺是老接口
(1)需要設置axios的請求頭爲：application/x-www-form-urlencoded
(2)需要將參數轉爲拼接方式：key1=value1&key2=value2
(3)使用axios後如何判斷後臺是老接口還是新接口？
a. 有的服務器會返回一段文本提示你：參數格式錯誤
b. 有的服務器直接返回400錯誤碼，也是提示你參數格式錯誤
c. 有的服務器會直接報錯跨域
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn1">點我發送post請求(老接口)</button>
<button id="btn2">點我發送post請求(新接口)</button>
<!-- 導入axios -->
<script src="./axios.js"></script>
<script src="./qs.js"></script>
<form action="" enctype="application/x-www-form-urlencoded"></form>
<script>
/*
1.學習目標介紹 ： axios解決post請求兼容性問題
2.學習路線 ：
(1)post請求頭類型
a.在很久很久以前，ajax技術沒有發明以前，瀏覽器發送請求
使用的是form表單來發送，form表單默認的請求頭是：application/x-www-form-urlencoded
b.後來ajax技術發明之後，由於之前的服務器處理post請求都是按照表單的默認請求頭方式來處理
所以，ajax發送post請求，一般也設置請求頭爲：application/x-www-form-urlencoded
c. axios技術發明之後，此時json數據格式傳輸已經越來越流行，所以在axios中
post請求默認的請求頭是：'Content-Type: application/json;charset=UTF-8'
d. 不同的請求頭，服務器在處理的時候方式不一樣。所以前後端必須要統一
總結：
a. 老接口的post請求頭是：application/x-www-form-urlencoded
這種方式參數會以： 'key1=value1&key2=value2'形式傳輸
後臺處理方式：字符串切割獲取參數
b. 新接口的post請求頭是: application/json;charset=UTF-8
這種方式參數會以json格式傳輸： '{"key":"value"}'
這種方式處理：JSON.parse()解析
(2)axios解決post請求兼容性
a. 如果你的後臺是新接口，則不需要任何處理。（axios默認json格式）
b. 如果你的後臺是老接口
(1)需要設置axios的請求頭爲：application/x-www-form-urlencoded
(2)需要將參數轉爲拼接方式：key1=value1&key2=value2
(3)使用axios後如何判斷後臺是老接口還是新接口？
a. 有的服務器會返回一段文本提示你：參數格式錯誤
b. 有的服務器直接返回400錯誤碼，也是提示你參數格式錯誤
c. 有的服務器會直接報錯跨域
*/
//post請求：老接口
/*
1.設置請求頭：
headers: {'Content-type': 'application/x-www-form-urlencoded'}
2.將參數轉爲字符串拼接方式
一般使用第三庫qs來轉換
*/
btn1.onclick = function () {
//(1)使用第三方庫 qs來轉換參數格式(推薦)
let str1 = Qs.stringify({username: 'zxk'});
console.log(str1);
//(2)使用js原生對象URLSearchParams來處理 （好處：不需要導入Qs庫）
// var param = new URLSearchParams();
// param.append('username','zxk');
axios({
url: 'https://autumnfish.cn/api/user/check',
method: 'post',
data: str1,
headers: {'Content-type': 'application/x-www-form-urlencoded'}
}).then(res => {
console.log(res);
})
};
//post請求：新接口
//不需要任何處理
btn2.onclick = function () {
axios({
url: 'http://ttapi.research.itcast.cn/mp/v1_0/authorizations',
method: 'post',
data: {
mobile: '18801185985',
code: '246810'
},
}).then(res => {
console.log(res);
})
};
</script>
</body>
</html>