vue中axios请求数据data格式问题研究及解决办法
注:网上很多都是使用post发送的例子,但是我使用过程当中,就是参数有问题,一直报参数无法present的问题,后来看到这篇博客,需要引入QS对参数进行转换,且要设置Content-Type,这样就可以了,特别注意QS的功能:第一个坑:使用axios的then之后,要给data赋值,使用this报错,以下是原因和解决方案:第一种方法在then 这个里边的赋值方法this.followe...
注:
网上很多都是使用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,或
StreamtransformRequest:
[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)中关于数据格式不正确情况下修改数据格式的方法。
更多推荐
所有评论(0)