URL-Ähnlich Kodierte Anfragenkörper

Normalerweise serialisiert Axios JavaScript-Objekte zu JSON. Um Daten stattdessen im Format application/x-www-form-urlencoded zu senden, können die folgenden Methoden verwendet werden:

Browser

In einem Browser kann die URLSearchParams (opens new window)-API wie folgt verwendet werden:

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

URLSearchParams wird nicht von allen Browsern unterstützt (siehe caniuse.com (opens new window)), aber es gibt ein Polyfill (opens new window).

Als Alternative können Daten mit dem Modul qs (opens new window) verarbeitet werden:

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

Oder auch so: (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

Query string

In Node.js kann das Modul querystring (opens new window) verwendet werden:

const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

oder URLSearchParams (opens new window) aus dem Modul url (opens new window):

const url = require('url');
const params = new url.URLSearchParams({ foo: 'bar' });
axios.post('http://something.com/', params.toString());

Das Modul qs (opens new window) funktioniert ebenso.

Hinweis

Um verschachtelte Objekte senden zu können ist das Modul qs die bessere Wahl, da das Modul querystring bekanntlich Probleme mit solchen Fällen hat (https://github.com/nodejs/node-v0.x-archive/issues/1665).

Formulardaten

In Node.js funktioniert auch das Module form-data (opens new window):

const FormData = require('form-data');
 
const form = new FormData();
form.append('my_field', 'my value');
form.append('my_buffer', new Buffer(10));
form.append('my_file', fs.createReadStream('/foo/bar.jpg'));

axios.post('https://example.com', form, { headers: form.getHeaders() })

Alternativ kann auch ein Abfänger verwendet werden.

axios.interceptors.request.use(config => {
  if (config.data instanceof FormData) {
    Object.assign(config.headers, config.data.getHeaders());
  }
  return config;
});