关于vue中axios的数据data格式问题
**# 注:网上很多都是使用post发送的例子,但是我使用过程当中,就是参数有问题,一直报参数无法present的问题,后来看到这篇博客,需要引入QS对参数进行转换,且要设置Content-Type,这样就可以了,特别注意QS的功能:****`第一个坑:使用axios的then之后,要给data赋值,使用this报错,以下是原因和解决方案:`**> 第一种方法在then 这个里边的赋
·
**# 注:
网上很多都是使用post发送的例子,但是我使用过程当中,就是参数有问题,一直报参数无法present的问题,后来看到这篇博客,需要引入QS对参数进行转换,且要设置Content-Type,这样就可以了,特别注意QS的功能:
**
**`第一个坑:使用axios的then之后,要给data赋值,使用this报错,以下是原因和解决方案:`**
> 第一种方法
在then 这个里边的赋值方法this.followed = response.data.followed会出现报错，什么原因呢？在Google上查了下，原来是在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
可以看下 Stackoverflow 的解释：
In option functions like data and created, vue binds this to the view-model instance for us, so we can use this.followed, but in the function inside then, this is not bound.
So you need to preserve the view-model like (created means the component's data structure is assembled, which is enough here, mounted will delay the operation more):
解决方法：
created() {
var self = this;
axios.post('/api/question/follower', {
'question':this.question,
'user':this.user
}).then(function(response){
// console.log(response.data);
self.followed = response.data.followed;
})
},
或者我们可以使用 ES6 的 箭头函数arrow function，箭头方法可以和父方法共享变量 ：
created() {
axios.post('/api/question/follower', {
'question':this.question,
'user':this.user
}).then((response) => {
this.followed = response.data.followed;
})
}
> 第二种方法
在研究中我们发现我们可以讲拼接进接口中，但是在企业级开发中这样的书写方法并不规范，所以在这个时候我们需要将axios的写法规范，在一般写法中我们
$axios{
urls:baseurl,
methond:base,
data:{}
headers:[xx:xxxx]
}
但是我们可以在每个文件中对config进行编译
例如：
import Qs from 'qs'
var vm = this
var data = Qs.stringify({"name":"痞子达"});
this.$http.post(vm.testUrl,data, {headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then((response)=>{
alert(response.data.msg);
})
`这个的使用前提是 我们需要 引入axios中的qs去改变 数据的格式`
因此 为了避免这样的重复的书写动作 ，我们会在入口文件中进行公共写法的编译
在axios的官方文档中指出（
https://www.kancloud.cn/yunye/axios/234845）
这里的主要操作是对 请求过程中的 then或者 catch
进行拦截 （也就是在请求发送前对我们的data数据进行 转化 ）
官方文档中给出了 两种解决方法 我们使用 axios.create方法
可以使用自定义配置新建一个 axios 实例
axios.create([config])
var instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL: 'https://some-domain.com/api/',
// `transformRequest` 允许在向服务器发送前，修改请求数据
// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
transformRequest: [function (data) {
// 对 data 进行任意转换处理
return data;
}],
// `transformResponse` 在传递给 then/catch 前，允许修改响应数据
transformResponse: [function (data) {
// 对 data 进行任意转换处理
return data;
}],
// `headers` 是即将被发送的自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},
在这里改变 具体代码如下
**var instance = axios.create({
//config里面有这个transformRquest，这个选项会在发送参数前进行处理。
//这时候我们通过Qs.stringify转换为表单查询参数
transformRequest: [function (data) {
data = Qs.stringify(data);
return data;
}],
headers:{'Content-Type':'application/x-www-form-urlencoded'}
})**
同时需要在 vue.use(vueaxios , axios )前 实例化 一个 vue.use(vueaxios,instance)
这里的方法 直接影响了整个 instance的 使用
参考文章
引用文章（
https://blog.csdn.net/nihaoqiulinhe/article/details/79084755）中关于数据格式不正确情况下修改数据格式的方法。
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)