在使用axios這個ajax插件的時候,我們有些時候會遇到一些問題,比如:數據格式不正確
以最簡單的例子為基礎(這里使用post方法):
在上面的例子中我們直接調用axios的post方法,傳給后台的參數為json格式,這和jquery的ajax寫法相當類似!
但是,axios發送的數據格式和jquery ajax發送的默認數據格式卻不相同,接下來讓我們來看一下不同之處:
1.axios的數據類型
2.jquery ajax的數據類型
看到這里,有的小伙伴就要說了,修改下ContentType不就好了,其實不然,即時是修改了ContentType,數據依然不正確:
--------------------->
通過度娘的各種檢索,終於找到了答案: 使用URLSearchParams來處理參數,URLSearchParams的兼容性並不高,所以使用的時候還是要注意(可以考慮使用babel來轉換)
具體的操作如下:
----------------->
通過使用URLSearchParams的處理,我們就能像jquery ajax發送的數據一樣了!!!
使用application / x-www-form-urlencoded格式
默認情況下,axios將JavaScript對象序列化為JSON。 要以應用程序/ x-www-form-urlencoded格式發送數據,您可以使用以下選項之一。
瀏覽器
在瀏覽器中,您可以使用URLSearchParams API,如下所示:
1
2
3
4
|
var params = new URLSearchParams();
params.append(
'param1', 'value1');
params.append(
'param2', 'value2');
axios.post(
'/foo', params);
|
請注意,所有瀏覽器都不支持URLSearchParams,但是有一個polyfill可用(確保polyfill全局環境)。
或者,您可以使用qs庫對數據進行編碼:
1
2
|
var qs = require('qs');
axios.post(
'/foo', qs.stringify({ 'bar': 123 });
|
Node.js
在node.js中,可以使用querystring模塊,如下所示:
1
2
|
var querystring = require('querystring');
axios.post(
'http://something.com/', querystring.stringify({ foo: 'bar' });
|
你也可以使用qs庫。
Promise
axios 依賴本機要支持ES6 Promise實現。 如果您的環境不支持ES6 Promises,您可以使用polyfill。
TypeScript
axios包括TypeScript定義。
1
2
|
import axios from 'axios';
axios.get(
'/user?ID=12345');
|
axios在很大程度上受到Angular提供的$http服務的啟發。 最終,axios努力提供一個在Angular外使用的獨立的$http-like服務。
本文章部分引用(https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams#Browser_compatibility,https://segmentfault.com/a/1190000005980048)
----------------------------------------------------------------------------------------
除了上面那些復制粘貼的,下面
重點來了,這是qs.stringify與JSON.stringify的區別
var a = {name:'hehe',age:10};
qs.stringify序列化結果如下
name=hehe&age=10
而JSON.stringify序列化結果如下:
"{"a":"hehe","age":10}"
所以只要在傳遞參數時不按照json格式傳遞,反正最終都會轉化成qs.stringify轉化后的格式,所以只要傳遞時改為name=value的格式傳遞即可,php也會正常接收。
eg:
axios.post('../php/index.php','tel='+this.tel+'&pwd='+this.pwd+'&rpwd='+this.rpwd).then(function (response) {
alert(response.data);
php:
$tel1 = trim($_POST['tel']);
----------------------------------------------------------------------------------------