axios传参方式及conten-type

--get请求:axios中常见的get/delete请求,也称作query请求:

携带参数在浏览器控制台的显示


image.png
//一般发送请求是这么写(不推荐):
axios.get('/user?id=12345&name=user')

//但是为了方便全局统一调用封装的axios,采用
axios.get('/user', {  //params参数必写 , 如果没有参数传{}也可以
    params: {  
       id: 12345,
       name: user
    }
})
vue中axios 的delete和post,put在传值上有点区别;

post和put有三个参数,url,data和config,
所以在使用这两个时,可以写成axios.post(api,{id:1}),axios.put(api,{id:1}),

但是delete只有两个参数:url和config,data在config中
所以需要写成 axios.delete(api,{data:{id:1}})

如果是服务端将参数当作对象来封装接收则 参数格式为:{data: param}

axios.delete("/api", {data: param})

如果服务端将参数当做url 参数 接收,则格式为:{params: param},这样发送的url将变为http:www.XXX.com?a=..&b=..

axios.delete("/api", {params: param})

--post请求常见的数据格式(content-type)

1.Content-Type: application/json : 请求体中的数据会以json字符串的形式发送到后端


image.png

2.Content-Type: application/x-www-form-urlencoded:请求体中的数据会以普通表单形式(键值对)发送到后端


image.png

3.Content-Type: multipart/form-data:既可以上传键值对,也可以上传文件。与application/x-www-form-urlencoded 的区别是她支持文件的传输,并且它的传输数据放在request-payload里,并且以bounday进行分隔。


image.png
1.Content-Type: application/json

如果没有特别声明,application/json是Axios默认的Content-Type,它声明了请求体中的数据将会以json字符串的形式发送到后端。在请求的时候,需要将需要传给后台的数据JSON序列化即可。

const params = {
    name:'ttt',
    age:18
};
this.$axios.post("/XXXX/XXXX", params).then(data => {
    //To Do
});
2.application/x-www-form-urlencoded
#引入 qs ,这个库是 axios 里面包含的,不需要再下载了。
import axios from 'axios';
import qs from 'qs'
let data={name:'张三',age:18};
axios.post('url',qs.stringify(data))
.then(res=>{
    console.log('返回数据:',res)
})
3.multipart/form-data
import axios from 'axios';
let data=new FormData();
data.append('name','张三');
data.append('age',18);
axios.post('url',data)
.then(res=>{
    console.log('返回数据:',res)
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容