快捷搜索:

axios用post提交的数据格式,详解解决使用axios发送

作者: w88官方网站手机版  发布:2019-07-28

问题描述

vue框架推荐使用axios来发送ajax请求,之前我还写过一篇博客来讲解如何在vue组件中使用axios。但之前做着玩用的都是get请求,现在我自己搭博客时使用了post方法,结果发现后台(node.js)完全拿不到前台传来的参数。后来进过一番探索,终于发现问题所在。

vue框架推荐使用axios来发送ajax请求,之前我还写过一篇博客来讲解如何在vue组件中使用axios。但之前做着玩用的都是get请求,现在我自己搭博客时使用了post方法,结果发现后台(node.js)完全拿不到前台传来的参数。后来进过一番探索,终于发现问题所在。

按照axios官网例子发起请求传递json,后台接受到的数据为空,一直卡在options阶段。

post提交数据的四种编码方式

post提交数据的四种编码方式

尝试的方法

1.application/x-www-form-urlencoded

1.application/x-www-form-urlencoded

开始以为是接口有问题,使用postman测试下,一切正常,百思不得其解,看了好多issue也解决不了,加了headers:{'content-type':'application/json'}也没用。

这应该是最常见的post编码方式,一般的表单提交默认以此方式提交。大部分服务器语言对这种方式都有很好的支持。在PHP中,可以用$_POST[“key”]的方式获取到key的值,在node中我们可以使用querystring中间件对参数进行分离

这应该是最常见的post编码方式,一般的表单提交默认以此方式提交。大部分服务器语言对这种方式都有很好的支持。在PHP中,可以用$_POST[“key”]的方式获取到key的值,在node中我们可以使用querystring中间件对参数进行分离

官网上是说,传json就按application/json进行处理,然而并没有卵用;之后套了一层JSON.stringify(data)content-type又变成表单格式了==。

app.post("/server",function(req,res){
 req.on("data",function(data){
  let key=querystring.parse(decodeURIComponent(data)).key;
  console.log("querystring:" key)
 });
});
app.post("/server",function(req,res){
 req.on("data",function(data){
 let key=querystring.parse(decodeURIComponent(data)).key;
 console.log("querystring:" key)
 });
});

然后翻自己之前的代码,发现写法如出一辙,怀疑是版本号的问题,然而并不是==。。。。考虑到可能和服务端有关系。

2.multipart/form-data

2.multipart/form-data

原代码如下:

这也是一种比较常见的post数据格式,我们用表单上传文件时,必须使form表单的enctype属性或者ajax的contentType参数等于multipart/form-data。使用这种编码格式时发送到后台的数据长得像这样子

这也是一种比较常见的post数据格式,我们用表单上传文件时,必须使form表单的enctype属性或者ajax的contentType参数等于multipart/form-data。使用这种编码格式时发送到后台的数据长得像这样子

import axios from 'axios';

export default function request(url, params) {
  return axios.post(`xxxxxx/${url}`, params)
    .then((response) => {
      console.log('response', response);
      return response;
    })
    .catch((error) => {
      console.log('error', error);
      return error;
    });
}

w88官方网站手机版 1 

w88官方网站手机版 2

最后想想还是用fetch吧(确实用了,发现还是有这个问题,现在深度怀疑是服务端将参数类型卡的太死了,还有polyfill的问题就放弃了,如果有知道的小伙伴请留言告诉我,谢谢),实在不行就ajax(还要封装成promise,哭)。出于对axios的坚持,终于找到了解决方法。

不同字段以--boundary开始,接着是内容描述信息,最后是字段具体内容。如果传输的是文件,还要包含文件名和文件类型信息

不同字段以--boundary开始,接着是内容描述信息,最后是字段具体内容。如果传输的是文件,还要包含文件名和文件类型信息

解决方法

3.application/json

3.application/json

就是添加qs库,将json序列化之后传递,详见这个issue。

axios默认提交就是使用这种格式。如果使用这种编码方式,那么传递到后台的将是序列化后的json字符串。我们可以将application/json与application/x-www-form-urlencoded发送的数据进行比较

axios默认提交就是使用这种格式。如果使用这种编码方式,那么传递到后台的将是序列化后的json字符串。我们可以将application/json与application/x-www-form-urlencoded发送的数据进行比较

代码:

首先是application/json:

首先是application/json:

import axios from 'axios';
import qs from 'qs';

export default function request(url, params) {
  return axios.post(`https://xxxxxxxx/${url}`, qs.stringify(params))
    .then((response) => {
      console.log('response', response);
      return response;
    })
    .catch((error) => {
      console.log('error', error);
      return error;
    });
}

w88官方网站手机版 3 

w88官方网站手机版 4

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

接着是application/x-www-form-urlencoded:

接着是application/x-www-form-urlencoded:

您可能感兴趣的文章:

  • 解决Vue axios post请求,后台获取不到数据的问题方法
  • axios向后台传递数组作为参数的方法

w88官方网站手机版 5 

w88官方网站手机版 6

这里可以明显看出application/x-www-form-urlencoded上传到后台的数据是以key-value形式进行组织的,而application/json则直接是个json字符串。如果在处理application/json时后台还是采用对付application/x-www-form-urlencoded的方式将会产生问题。例如后台node.js依然采用之前对付application/x-www-form-urlencoded的方法,那么querystring.parse(decodeURIComponent(data))之后得到的数据是这样子的

w88官方网站手机版,这里可以明显看出application/x-www-form-urlencoded上传到后台的数据是以key-value形式进行组织的,而application/json则直接是个json字符串。如果在处理application/json时后台还是采用对付application/x-www-form-urlencoded的方式将会产生问题。

w88官方网站手机版 7 

例如后台node.js依然采用之前对付application/x-www-form-urlencoded的方法,那么querystring.parse(decodeURIComponent(data))之后得到的数据是这样子的

这个时候再querystring.parse(decodeURIComponent(data)).key只能获取到undefined

w88官方网站手机版 8

4.text/xml

这个时候再querystring.parse(decodeURIComponent(data)).key只能获取到undefined

剩下的一种编码格式是text/xml,这种格式我没有怎么使用过

4.text/xml

解决方法

剩下的一种编码格式是text/xml,这种格式我没有怎么使用过

既然我们知道axios post方法默认使用application/json格式编码数据,那么解决方案就有两种,一是后台改变接收参数的方法,另一种则是将axios post方法的编码格式修改为application/x-www-form-urlencoded,这样就不需要后台做什么修改了。
先来看第一种解决方法

解决方法

vue组件中,axios发送post请求的代码如下

既然我们知道axios post方法默认使用application/json格式编码数据,那么解决方案就有两种,一是后台改变接收参数的方法,另一种则是将axios post方法的编码格式修改为application/x-www-form-urlencoded,这样就不需要后台做什么修改了。

this.$axios({
 method:"post",
 url:"/api/haveUser",
 data:{
  name:this.name,
  password:this.password
 }
}).then((res)=>{
 console.log(res.data);
})

先来看第一种解决方法

此时控制台Network Headers里面的信息是这样子的

vue组件中,axios发送post请求的代码如下

w88官方网站手机版 9 

this.$axios({
 method:"post",
 url:"/api/haveUser",
 data:{
 name:this.name,
 password:this.password
 }
}).then((res)=>{
 console.log(res.data);
})

后台接收数据需要依赖body-parser中间件,我们事先装好,接着在后台代码中引用body-parser

此时控制台Network Headers里面的信息是这样子的

w88官方网站手机版 10 

w88官方网站手机版 11

这张截图中,发挥作用的代码仅仅是const bodyParser=require("body-parser");

后台接收数据需要依赖body-parser中间件,我们事先装好,接着在后台代码中引用body-parser

接下来在路由中使用body-parser

w88官方网站手机版 12

app.post("/api/haveUser",bodyParser.json(),function(req,res){
 console.log(req.body);
 let haveUser=require("../api/server/user.js");
 haveUser(req.body.name,req.body.password,res);
});

这张截图中,发挥作用的代码仅仅是const bodyParser=require("body-parser");

这时,当前台发送post请求之后,后台控制台中就会打印出req.body

接下来在路由中使用body-parser

w88官方网站手机版 13 

app.post("/api/haveUser",bodyParser.json(),function(req,res){
 console.log(req.body);
 let haveUser=require("../api/server/user.js");
 haveUser(req.body.name,req.body.password,res);
});

这时,通过req.body.name或者req.body.password就能拿到对应的值。

这时,当前台发送post请求之后,后台控制台中就会打印出req.body

这种方法比较简单,也不需要前台做过多修改,推荐使用这种方法。

w88官方网站手机版 14

第二种解决方法,具体操作如下

这时,通过req.body.name或者req.body.password就能拿到对应的值。

前端

这种方法比较简单,也不需要前台做过多修改,推荐使用这种方法。

this.$axios({
 method:"post",
 url:"/api/haveUser",
 headers:{
  'Content-type': 'application/x-www-form-urlencoded'
 },
 data:{
  name:this.name,
  password:this.password
 },
 transformRequest: [function (data) {
  let ret = ''
  for (let it in data) {
   ret  = encodeURIComponent(it)   '='   encodeURIComponent(data[it])   '&'
  }
  return ret
  }],
}).then((res)=>{
 console.log(res.data);
})

第二种解决方法,具体操作如下

其中发挥关键作用的是headers与transformRequest。其中 headers 是设置即将被发送的自定义请求头。 transformRequest 允许在向服务器发送前,修改请求数据。这样操作之后,后台querystring.parse(decodeURIComponent(data))获取到的就是类似于{ name: 'w', password: 'w' }的对象。后台代码如下

前端

app.post("/api/haveUser",function(req,res){
  let haveUser=require("../api/server/user.js");
  req.on("data",function(data){
   let name=querystring.parse(decodeURIComponent(data)).name;
   let password=querystring.parse(decodeURIComponent(data)).password;
   console.log(name,password)
   haveUser(name,password,res);
  });
});
this.$axios({
 method:"post",
 url:"/api/haveUser",
 headers:{
 'Content-type': 'application/x-www-form-urlencoded'
 },
 data:{
 name:this.name,
 password:this.password
 },
 transformRequest: [function (data) {
 let ret = ''
 for (let it in data) {
  ret  = encodeURIComponent(it)   '='   encodeURIComponent(data[it])   '&'
 }
 return ret
 }],
}).then((res)=>{
 console.log(res.data);
})

这种方法明显就要比第一种麻烦一点,但不需要后台做过多处理。所以具体操作还是得根据实际情况决定。

其中发挥关键作用的是headers与transformRequest。其中 headers 是设置即将被发送的自定义请求头。 transformRequest 允许在向服务器发送前,修改请求数据。这样操作之后,后台querystring.parse(decodeURIComponent(data))获取到的就是类似于{ name: 'w', password: 'w' }的对象。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

后台代码如下

您可能感兴趣的文章:

  • axios post提交formdata的实例
app.post("/api/haveUser",function(req,res){
 let haveUser=require("../api/server/user.js");
 req.on("data",function(data){
  let name=querystring.parse(decodeURIComponent(data)).name;
  let password=querystring.parse(decodeURIComponent(data)).password;
  console.log(name,password)
  haveUser(name,password,res);
 });
});

这种方法明显就要比第一种麻烦一点,但不需要后台做过多处理。所以具体操作还是得根据实际情况决定。

以上这篇axios post提交formdata的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 详解vue axios用post提交的数据格式

本文由www.w88985.com发布于w88官方网站手机版,转载请注明出处:axios用post提交的数据格式,详解解决使用axios发送

关键词: www.w88985.c