問題是什么
項目由jquery 轉 vue
ajax 請求改成 axios
移植代碼get 問題不大，但是post請求無法正確取到數(shù)據(jù)躺盛，甚至出現(xiàn)一請求后臺就掛的情況
問題排查
1. 是我參數(shù)傳錯了嘛旺垒？
不會吧彩库，copy過來的呀。對比了一下參數(shù)內(nèi)容先蒋，一模一樣的呀
2. 是我axios的寫法寫錯了嗎骇钦？
不是，因為寫錯的話竞漾，應該連數(shù)據(jù)都無法返回眯搭，但是現(xiàn)在的情況是，我不管發(fā)什么樣的參數(shù)過去业岁，都是返回一樣的數(shù)據(jù)鳞仙，說明前端傳值無效
3. 再重新看下參數(shù)
舊框架
新框架
發(fā)現(xiàn)了兩處不同
請求頭中的
Content-Type不一樣
一個是application/json，一個是application/x-www-form-urlencoded
解決問題
只要發(fā)現(xiàn)問題所在叨襟，這就好辦了
- 在攔截器中繁扎，設置
Content-Type為application/x-www-form-urlencoded
//配置發(fā)送請求前的攔截器 可以設置token信息
axios.interceptors.request.use(
config => {
config.headers['Content-Type'] = "application/x-www-form-urlencoded";
return config;
},
error => {
return Promise.reject(error);
}
);
可是改完測試發(fā)現(xiàn)沒有改動到，請求頭中的Content-Type依然是application/json
- 引入qs
config.data = qs.stringify( config.data)
//配置發(fā)送請求前的攔截器 可以設置token信息
axios.interceptors.request.use(
config => {
config.data = qs.stringify( config.data);//關鍵代碼
return config;
},
error => {
return Promise.reject(error);
}
);
到此終結撒花，完美解決
題外話qs 是何方神圣
qs.stringify
基本用法
// qs.stringify 則和 qs.parse 相反梳玫，是把一個參數(shù)對象格式化為一個字符串爹梁。
let params = { c:'b', a: 'd' };
qs.stringify(params)
// 結果是
‘c=b&a=d‘
參考文章
https://segmentfault.com/a/1190000015261229?utm_source=tag-newest
qs簡介
