Клиент Axios Http - Как создать URL-адрес Http Post с параметрами формы

Я пытаюсь создать запрос postHTTP с некоторыми параметрами формы, которые необходимо установить. Я использую axios с сервером узлов. У меня уже есть реализация java-кода для создания URL-адреса, как показано ниже:

КОД JAVA:

HttpPost post = new HttpPost(UriBuilder.fromUri (getProperty("authServerUrl"))
            .path(TOKEN_ACCESS_PATH).build(getProperty("realm")));

List<NameValuePair> formParams = new ArrayList<NameValuePair>();

formParams.add(new NameValuePair("username",getProperty ("username")));
formParams.add(new NameValuePair("password",getProperty ("password")));
formParams.add(new NameValuePair("client_id, "user-client"));

Я пытаюсь сделать то же самое в аксиомах.

РЕАЛИЗАЦИЯ AXIOS:

axios.post(authServerUrl +token_access_path,
        {
                username: 'abcd', //gave the values directly for testing
                password: '1235!',
                client_id: 'user-client'
        }).then(function(response) {
            console.log(response); //no output rendered
        }

Правильный ли подход к установке этих параметров формы в почтовом запросе?


node.js javascript axios
person mmraj    schedule 31.07.2015    source источник

Ответы (4)


arrow_upward
117
arrow_downward

Вам необходимо сделать следующее:

var querystring = require('querystring');
//...
axios.post(authServerUrl + token_access_path,
    querystring.stringify({
            username: 'abcd', //gave the values directly for testing
            password: '1235!',
            client_id: 'user-client'
    }), {
      headers: { 
        "Content-Type": "application/x-www-form-urlencoded"
      }
    }).then(function(response) {
        console.log(response);
    });
person cperez    schedule 01.08.2015
comment
Это очень помогло мне, так что просто querystring.stringify json, который вы хотите отправить, если вы используете application/x-www-form-urlencoded. - person ThomasReggi; 02.03.2016
comment
для es6 используйте import qs from 'qs'; для строкового преобразования вашего объекта - person Ahmed Wahba; 02.07.2020

arrow_upward
26
arrow_downward

Зачем использовать другую библиотеку или модуль, чтобы сделать что-то настолько простое с чистым ванильным JavaScript? На самом деле это одна строка JS для создания желаемых данных для отправки в вашем POST-запросе.

// es6 example

const params = {
  format: 'json',
  option: 'value'
};

const data = Object.keys(params)
  .map((key) => `${key}=${encodeURIComponent(params[key])}`)
  .join('&');

console.log(data);
// => format=json&option=value

const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data,
  url: 'https://whatever.com/api',
};

const response = await axios(options);  // wrap in async function
console.log(response);
person jhickok    schedule 17.04.2019
comment
В вашем решении отсутствует один шаг, закодируйте значения. Заменить de ${val} на ${encodeURIComponent(val)} - person Giovane; 02.05.2019
comment
Спасибо за добавление Джоване. Я обновил код. - person jhickok; 13.05.2019
comment
@Michael Cole, почему вы удалили квадратные скобки при редактировании? Они необходимы. Предположительно, ответ Ника Хэншоу был опубликован из-за вашего изменения. - person Tyler Collier; 24.02.2021
comment
Действительно, это изменение было неправильным и не работало. Отредактировано в соответствии с рабочим ответом Ника (вероятно, этот работал до ложного редактирования) - person Blacklight; 26.02.2021

arrow_upward
9
arrow_downward

Если ваша целевая среда выполнения поддерживает его, Axios может принять экземпляр URLSearchParams, который также установит соответствующий заголовок Content-type в application/x-www-form-urlencoded

axios.post(authServerUrl + token_access_path, new URLSearchParams({
  username: 'abcd', //gave the values directly for testing
  password: '1235!',
  client_id: 'user-client'
}))

снимок экрана сетевой консоли

То же самое и с fetch API.

fetch(url, {
  method: "POST",
  body: new URLSearchParams({
    your: "object",
    props: "go here"
  })
})
person Phil    schedule 14.04.2021

arrow_upward
4
arrow_downward

Я согласен с jhickok, нет необходимости использовать дополнительную библиотеку, однако их код не даст правильного результата из-за использования Object.entries, вы ожидаете увидеть следующее:

формат, json = 0 & параметр, значение = 1

Вместо этого следует использовать Object.keys.

const obj = {
  format: 'json',
  option: 'value'
};

const data = Object.keys(obj)
  .map((key, index) => `${key}=${encodeURIComponent(obj[key])}`)
  .join('&');
  
console.log(data); // format=json&option=value

Тогда конечно ...

const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data,
  url: 'https://whatever.com/api',
};

const response = await axios(options);

person Nick Hanshaw    schedule 20.02.2021