Front-end development now needs to get back-end data by sending a request Ajax is a very common thing, and I'm usually in line and in view of the code with a vue technology stack, here today to talk about a plug-in we often send Ajax requests -axios.
> Online now possible to send Ajax requests, there are many plug-ins, each usage may be slightly different, we only need to pick a favorite to own. After all, there are still a lot of people use jQuery, $. Ajax usage is a lot.
Start
Because of the need to use axios plug-in, so we kind of project relies download
npm install axios -SWhile axios is a plug-in, but we do not need to be used by Vue.use (axios), after the download is complete, you can just introduced in the project, as to why we can look at Baidu, or leave a message, seemingly because developers when the package axios, did not write install this step.
use
For example, we use axios in the project myInfo.vue, when the component sends Ajax requests to obtain user information after creating a successful show in front of us. Introduced first, and then send the request function created in the component lifecycle.
If you need to request data and can usually be based on the data sent Ajax render the page display in front of us in the Component lifecycle request to hook created, this time component instance properties and methods can be called.
Now comes the moment the focus of the ~ ~ ~
When transmitting data post axios used, default json directly into the body of the request submitted to the backend. In other words, we become a Content-Type application / json; charset = utf-8, which is the default axios request header content-type type. But we actually back-end requirements of the 'Content-Type': 'application / x-www-form-urlencoded' is more common, which do not meet with us. So many students here will make mistakes, resulting in less data acquisition request. Obviously their request to the address and parameters are do not get data.
Let us deal with post requests common data format (content-type)
- Content-Type: application/json ： 请求体中的数据会以json字符串的形式发送到后端
- Content-Type: application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端
- Content-Type: multipart/form-data： 它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。
我们熟悉了常见的请求数据格式之后，现在我们来解决刚才遇到的问题： 后端需要接受的数据类型为：application/x-www-form-urlencoded，我们前端该如何配置：
常见方法汇总：
- 【用 URLSearchParams 传递参数】代码简单，省事
let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin') axios({ method: 'post', url: '/api/lockServer/search', data: param })可以看到我在项目中采用的就是第一种方法。> 需要注意的是： URLSearchParams 不支持所有的浏览器，但是总体的支持情况还是 OK 的，所以优先推荐这种简单直接的解决方案
- 配置axios请求头中的content-type为指定类型
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) })好了，我们解决了常见的application/x-www-form-urlencoded形式的传参，那么对于后面的两种又是怎样转换的呢，且听我一一道来。
- 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) })可以看到我这里就是用到了这种方法实现用户图像更新效果的~~
- Content-Type: application/json
这种是axios默认的请求数据类型，我们只需将参数序列化json字符串进行传递即可，无需多余的配置。
总结
好了，以上基本的axios配置Content-Type的方法就讲述到这里，欢迎大家提出更好的建议和指正其中的错误。