URL 編碼主體
預設情況下,axios 會將 JavaScript 物件序列化為 JSON
。若要改用 application/x-www-form-urlencoded
格式傳送資料,您可以使用下列其中一種方法。
瀏覽器
在瀏覽器中,您可以使用 URLSearchParams
API,如下所示
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);
請注意,並非所有瀏覽器都支援
URLSearchParams
(請參閱 caniuse.com),但有一個 polyfill 可用(請務必對全域環境進行 polyfill)。
或者,您可以使用 qs
函式庫對資料進行編碼
const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));
或用另一種方式(ES6),
import qs from 'qs';
const data = { 'bar': 123 };
const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data),
url,
};
axios(options);
Node.js
查詢字串
在 node.js 中,您可以使用 querystring
模組,如下所示
const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));
或 'URLSearchParams' 來自 'url 模組' 如下所示
const url = require('url');
const params = new url.URLSearchParams({ foo: 'bar' });
axios.post('http://something.com/', params.toString());
您也可以使用 qs
函式庫。
注意:如果您需要將巢狀物件字串化,建議使用
qs
函式庫,因為querystring
方法已知在該使用案例中存在問題(https://github.com/nodejs/node-v0.x-archive/issues/1665)。
🆕 自動序列化
如果將 content-type
標頭設定為 application/x-www-form-urlencoded
,Axios 會自動將資料物件序列化為 URL 編碼格式。
這在瀏覽器和 node.js
中都可以使用
const data = {
x: 1,
arr: [1, 2, 3],
arr2: [1, [2], 3],
users: [{name: 'Peter', surname: 'Griffin'}, {name: 'Thomas', surname: 'Anderson'}],
};
await axios.post('https://postman-echo.com/post', data,
{headers: {'content-type': 'application/x-www-form-urlencoded'}}
);
伺服器會將其視為
{
x: '1',
'arr[]': [ '1', '2', '3' ],
'arr2[0]': '1',
'arr2[1][0]': '2',
'arr2[2]': '3',
'arr3[]': [ '1', '2', '3' ],
'users[0][name]': 'Peter',
'users[0][surname]': 'griffin',
'users[1][name]': 'Thomas',
'users[1][surname]': 'Anderson'
}
如果您的伺服器架構的請求主體剖析器(例如 express.js
的 body-parser
)支援巢狀物件解碼,您將自動收到與您提交的相同的伺服器物件。
Echo 伺服器範例 (express.js
)
var app = express();
app.use(bodyParser.urlencoded({ extended: true })); // support url-encoded bodies
app.post('/', function (req, res, next) {
res.send(JSON.stringify(req.body));
});
server = app.listen(3000);