axios发送请求的数据格式

使用axios对接数据格式问题

1.post请求常见的数据格式

Content-Type: application/json ：请求体中的数据会以json字符串的形式发送到后端
Content-Type: application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端
Content-Type: multipart/form-data：它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。

2.application/x-www-form-urlencoded

axios默认使用的content-type为application/json并且是以request payload的形式发送数据，如果要用axios提交form-data数据，需要对axios做一些配置，先安装插件axios和qs，用于格式化数据

npm install axios qs --savejs

其次在main.js中引入qs和axios

import axios from 'axios'
import qs from 'qs'
Vue.prototype.qs = qs
Vue.prototype.$http = axios

使用挂载后的axios请求数据

 this.$http.post(this.$main + '/user/login',this.qs.stringify(this.loginForm),{headers: {'content-type': 'application/x-www-form-urlencoded'}}).then(res => {console.log(res)})

3.multipart/form-data
如果以multipart/form-data格式提交数据，配置如下

let params = new FormData()params.append('file', this.file)params.append('id', localStorage.getItem('userID'))this.$http.post(URL, params, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {if (res.data.code === 0) {this.$router.go(-1)}}).catch(error => {alert('更新用户数据失败' + error)})

总结，使用axios发送post请求时，如果content-type为application/json，那么请求体中数据部分必须是一个json对象，例如

this.$http.post(this.$main + '/user/save', this.totalSubmitArray, {//this.totalSubmitArray是一个json对象headers: {'content-type': 'application/json;charset=utf-8'}}).then(res => {console.log(res)})

content-type为application/x-www-form-urlencoded或multipart/form-data时，请求体中数据必须是formdata格式，例如

let params = new FormData()params.append('file', this.file)params.append('id', localStorage.getItem('userID'))this.$http.post(URL, params, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {if (res.data.code === 0) {this.$router.go(-1)}}).catch(error => {alert('更新用户数据失败' + error)})

axios发送请求的数据格式相关推荐

使用axios发送请求（不带参数和带参数）和使用mockjs
一.使用axios获取后端数据并使用(不带参数) 1.对axios进行封装 network/request.js import axios from 'axios' import nprogress ...
php使用axios发送请求,axios源码之模拟实现axios发送请求
axios内部运作流程大致如下axios入口- ->axios构造函数- ->interceptors请求拦截器- ->dispatchRequest方法- ->transfo ...
vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)...
vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete) 手把手式笔记 Axios配置安装 axios ...
axios发送请求，后端报错：所需的防伪表单字段“__RequestVerificationToken”不存在
后端使用.net mvc开发,前端使用axios发送post请求遇到错误:所需的防伪表单字段"__RequestVerificationToken"不存在. 看到此提示我们知道原因 ...
Vue安装并使用axios发送请求
前言本文主要介绍的是使用在Vue项目中安装并使用axios发送请求 axios介绍 axios是一种Web数据交互方式它是一个基于promise的网络请求库,作用于node.js和浏览器中,它是 ...
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)
根据视频进行整理 [https://www.bilibili.com/video/BV1WC4y1b78y?p=1] 视频资料百度网盘: 链接:[https://pan.baidu.com/s/1n ...
Vue 爬坑之路（六）—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
vue商城项目开发：axios发送请求及列表数据展示
使用axios发送get请求先install一下axios: 在main.js中全局引入axios: 仅仅在main.js中引入axios不会生效: 第二种解决方法如下,也是最常用的: 使用$htt ...
vue2.0项目实战（3）使用axios发送请求
在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource. 关于为什么放弃推荐? -> 尤 ...

axios发送请求的数据格式

使用axios对接数据格式问题

axios发送请求的数据格式相关推荐

最新文章

热门文章