axios 是 spa 项目中常用的前后端的交互方式, 其实就是 promise 封装的 Ajax, 如下为 axios 的基本使用
axios 使用 post 发送数据时, 默认是直接将 JSON 放到请求体中提交到后端的, 也就是说 Content-Type 变成了 application/JSON;charset=utf-8, 这是 axios 默认的请求头 content-type 类型. 但是实际后端要求的'Content-Type':
'application/x-www=form-urlencodeed'为多见, 与默认配置不同. 就会导致请求地址和参数都对了却得不到数据.
post 常见的数据格式 (content-type)
1.Content-Type:application/JSON: 请求体中的数据会以 JSON 字符串的形式发送到后端
2.Content-Type:application/x-www-form-urlencoded: 请求体中的数据会以普通表单形式键值对发送到后端
3.Content-Type:multipart/form-data: 它会将请求体的数据处理为一条信息, 以标签为单元, 用分隔符分开, 既可以上传键值对也可以上传文件
下面说下常见的处理方式:
1. 用 URLSearchParams 传递参数, 比较省事
- let param = new URLSearchParams()
- param.append('username', 'admin')
- param.append('pwd', 'admin')
- axios({
- method: 'post',
- url: '/api/lockServer/search',
- data: param
- })
但是这种方式不支持所有的浏览器, 总体的支持比较 ok, 优先推荐这种解决
2. 就是给 axios 配置默认请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'或者 {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
然后将参数转换为 query 参数, 利用 qs
引入 qs, 这个库是 axios 里面包含的, 不需要下载了
- import Qs from 'qs'
- let data = {
- "username": "cc",
- "psd": "123456"
- }
- axios({
- headers: {
- 'Content-Type': 'application/x-www-form-urlencoded'
- },
- method: 'post',
- url: '/api/lockServer/search',
- data: Qs.stringify(data)
- })
那么对于 multipart/form-data 又该如何解决呢
常见的使用场景就是前端页面上传个人头像, 然后点击保存发送后端修改原始数据, 解决办法如下:
- 1.Content-Type:multipart/form-data
- let params = new FormData()
- params.append('file', this.file)
- params.append('id', localStorage.getItem('userID'))
- params.append('userName', this.name)
- params.append('sex', this.sex)
- params.append('mobile', this.phone)
- params.append('email', this.email)
- params.append('qq', this.qq)
- params.append('weChat', this.WeChat)
- axios.post(URL, params, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
- if (res.data.code === 0) {
- this.$router.go(-1)
- }
- }).catch(error => {
- alert('更新用户数据失败' + error)
- })
使用如下实现用户头像更新
2.Content-Type:application/JSON
这种就是 axios 默认的请求数据类型了, 只需要将参数序列化 JSON 字符串进行传递就行, 无须多余的配置
来源: http://www.bubuko.com/infodetail-3800484.html