使用vue插件axios传数据的Content-Type及格式问题详解

 更新时间:2022年09月16日 14:26:35   作者:东之健大坏蛋  
这篇文章主要介绍了使用vue插件axios传数据的Content-Type以及格式问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

1.一般来说,前后台对接,常用的Content-Type有:

application/json,application/x-www-form-urlencoded 以及 multipart/form-data,当我们使用axios时,一般不需要我们主动去设置Content-Type,而是跟着我们传的数据格式自动适应。

2.get请求

get请求时传递的参数是会出现在url里面的,我们使用aixos传递get请求时可用格式如下
(1)将参数拼接在url里

this.$axios({
	method: 'get',
	url: this.$store.state.api1 
		+ '&username=' + 'xxx' 
		+ '&password=' + 'xxx'
})

(2)将参数放入params对象里

this.$axios({
	method: 'get',
	url: this.$store.state.api1,
	params: {
		username: 'xxx',
	  	password: 'xxx'
	}
})

3.post请求

(1)当我们要传对象时,此时的 Content-Type 为 application/json 类型,传递的格式如下,将传递的参数放入对象中:

this.$axios({
	url: this.$store.state.api1,
	method: 'post',
	data: {
		username: 'xxx',
	  	password: 'xxx'
	}
})

(2)当我们要传字符串时,Content-Type 为 application/x-www-form-urlencoded 类型,传递的格式有如下:

this.$axios({
	method: 'post',
	url: this.$store.state.api1,
	data: 'username=' + 'xxx'
		+ '&password=' + 'xxx'
	})
this.$axios({
method: 'post',
url: this.$store.state.api1,
data: qs.stringify({
	username: 'xxx',
	password: 'xxx'
})

(3)当我们要传文件时,Content-Type 需要使用 multipart/form-data,格式如下:

// 获取文件
let input = document.querySelector('.input_file')
let curFiles = input.files

// 将文件放入formData中
let formData = new FormData()
for(let file of curFiles){
	formData.append('files', file)
}

// 将需要传递的参数放入formData中
formData.append('username', 'xxx')
formData.append('password', 'xxx')

// 调接口
this.$axios({
	url: this.$store.state.api1,
	method: 'post',
	data: formData
})

到此这篇关于使用vue插件axios传数据的Content-Type以及格式问题的文章就介绍到这了,更多相关vue Content-Type内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue项目使用微信公众号支付总结及遇到的坑

    vue项目使用微信公众号支付总结及遇到的坑

    这篇文章主要介绍了vue项目使用微信公众号支付总结,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10
  • 解决vue项目axios每次请求session不一致的问题

    解决vue项目axios每次请求session不一致的问题

    这篇文章主要介绍了解决vue项目axios每次请求session不一致的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vitepress的文档渲染基础教程

    Vitepress的文档渲染基础教程

    这篇文章主要为大家介绍了Vitepress的文档渲染基础教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • Vue中的生命周期介绍

    Vue中的生命周期介绍

    这篇文章介绍了Vue中的生命周期,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • vue踩坑记录之src的动态绑定赋值问题

    vue踩坑记录之src的动态绑定赋值问题

    这篇文章主要介绍了vue踩坑记录之src的动态绑定赋值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue项目首屏加载过慢的一些解决方案

    vue项目首屏加载过慢的一些解决方案

    最近碰到vue项目打包上线后,第一次打开首页后会出现空白、加载时间过长的情况,下面这篇文章主要给大家介绍了关于vue项目首屏加载过慢的一些解决方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • Vue前端表格导出Excel文件的图文教程

    Vue前端表格导出Excel文件的图文教程

    我们在开发的时候会经常用的导出excel表格功能,刚好自己开发有遇到,就记录一下,下面这篇文章主要给大家介绍了关于Vue前端表格导出Excel文件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • 使用vue根据状态添加列表数据和删除列表数据的实例

    使用vue根据状态添加列表数据和删除列表数据的实例

    今天小编就为大家分享一篇使用vue根据状态添加列表数据和删除列表数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue清空form对象的方法

    vue清空form对象的方法

    这篇文章主要介绍了vue清空form对象的方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue项目代码之路由拆分、Vuex模块拆分、element按需加载详解

    Vue项目代码之路由拆分、Vuex模块拆分、element按需加载详解

    这篇文章主要介绍了Vue项目代码之路由拆分、Vuex模块拆分、element按需加载,项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理,本文通过示例给大家详细讲解,需要的朋友可以参考下
    2022-11-11

最新评论