axios将数据作为表单数据而不是有效负载中的JSON发布

Question

我正在尝试我的第一个reactJS应用。

我正在使用axios.post（）方法发送数据。

submitHandler = event => {
  event.preventDefault();
  axios
    .post("http://demo.com/api/v1/end-user/login", {
      username: "",
      password: "",
      user_type: 1
    })
    .then(res => {
      console.log(res);
      console.log(res.data);
    });
}

但是当我进入“网络”标签时，与请求一起发送的数据似乎在有效载荷中。

我想将数据作为表单数据发送。我在想什么吗？

Answer 1

如果要在有效负载中将数据作为表单数据而不是JSON发送，则可以创建一个FormData对象，并将其用作第二个参数。

submitHandler = event => {
  event.preventDefault();

  const formData = new FormData();
  formData.append("username", "");
  formData.append("password", "");
  formData.append("user_type", 1);

  axios.post("http://demo.com/api/v1/end-user/login", formData).then(res => {
    console.log(res);
    console.log(res.data);
  });
};

Answer 2

您可以在axios中使用FormData（）之类的方法来

var body = new FormData();
body.set('userName', 'test');
body.set('password', 'test');
body.set('user_type', 1);

然后您可以使用axios post方法（可以相应地对其进行修改）

axios({
    method: 'post',
    url: 'http://demo.com/api/v1/end-user/login',
    data: body,
    config: { headers: {'Content-Type': 'multipart/form-data' }}
    })
    .then(function (response) {
        //handle success
        console.log(response);
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });