社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
完全不是一个东西,功能虽然都是序列化。假设我要提交的数据如下
var a = {name:'hehe',age:10};
qs.stringify序列化结果如下
name=hehe&age=10
而JSON.stringify序列化结果如下:
"{"a":"hehe","age":10}"
第二个坑:使用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;
})
},
在半年前尤大就不推荐使用vue-resource了,好像我这么没安全感的人,没人维护的东西不敢碰。
那么axios这个是什么呢?是一个国外友人开发的基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。它有什么用法呢:
作者这造型一看就是大牛,以后有机会我也要搞一个,浪。
反正功能很多啦,用法一搜一大堆。
英文:点这里看看官网教程
$ npm install axios
如果不用npm,可以通过cdn引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
这里笔者使用的是es6,由于标题是要结合vue,因此将vue、axios以及vue-axios引入。
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
#通过use方法加载axios插件
Vue.use(VueAxios,axios)
看看有哪些用法:
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
就挑我们最熟悉的get和post来看看:
.vue模板:
var vm = this
this.$http.get(vm.testUrl).then((response)=>{
alert(response.data.msg);
})
这里我们通过this.$http去调用axios,如果之前你的vue-resourse也是这么写的话,那简直可以无缝切换。当然你你换成this.axios
也是没有问题的,但扩展性就不好了。
testUrl:
public function test(){
return json(array('status'=>1,'msg'=>'success'));
}
现象:
这个post要重点说下,有坑。
.vue模板:
var vm = this
this.$http.post(vm.testUrl,{"name":"痞子达"})
.then((response)=>{
alert(response.data.msg);
})
testUrl:
public function test(){
return json(array('statys'=>1,'msg'=>$_POST['name']));
}
正常应该弹出“痞子达”,但是并没有,还报了500错误。
接口提示未定义数组索引: name
抓包看了看,是以Request Payload的形式传送了参数。
不是我们熟悉的form-data形式,看看api:
axios.post(url[, data[, config]])
第三个参数是config配置,这个配置应该可以做点事儿。这个config的参数有很多,先看看(随便瞅下就行):
我们发现有一个headers参数,那么对上面的代码修改:
var vm = this
this.$http.post(
vm.testUrl,
{"name":"痞子达"},
{headers:{'Content-Type':'application/x-www-form-urlencoded'}})
.then((response)=>{
alert(response.data.msg);
})
加入{headers:{'Content-Type':'application/x-www-form-urlencoded'}}
但这个时候还是没能够正确弹框,因为我们传过去的是key字符串,并且vlue是没有值的。
后端打印出来是这样的:
array(1) { ["{"name":"痞子达"}"]=> string(0) "" }
这必须获取不到啊,那我们尝试将其转换为query参数。
引入Qs,这个库是axios里面包含的,不需要再下载了。
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);
})
再看:
控制台看看那form-data:
这才是我们熟悉的样子。
但是我们不能每次请求都写一遍config,太麻烦了。
在入口文件main.js修改:
#创建一个axios实例
var axios_instance = axios.create({
#config里面有这个transformRquest,这个选项会在发送参数前进行处理。
#这时候我们通过Qs.stringify转换为表单查询参数
transformRequest: [function (data) {
data = Qs.stringify(data);
return data;
}],
#设置Content-Type
headers:{'Content-Type':'application/x-www-form-urlencoded'}
})
Vue.use(VueAxios, axios_instance)
ok,以后发起http请求,如下即可:
var vm = this
this.$http.post(vm.url,data).then((response)=>{
alert(response.data.msg);
})
其他的用法和配置大家可以深入研究。
为什么放弃vue-resource,可以看这里:
https://github.com/vuefe/vuefe.github.io/issues/186
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!