最近手头有个小项目,打算用vue练个手,期间用到了vue的插件:vue-resource。下面是我使用这个插件的一些经验,算是给自己写的一个笔记,分享出来也希望和我遇到同样坑的朋友可以借此踩坑而过~
在使用这个插件之前,当然是先安装啦:
npm i vue-resource --save安装读条完毕,接下来便是在项目中引入:
import VueResource from 'vue-resource'
Vue.use(VueResource);如上所述,在入口文件中引入vue-resource即可。然后便是具体的使用了。vue-resource的使用和以前在JQ,ZEPTO等等中使用的$.ajax方式类似,当然,官方也提供了一系列的接口供小伙伴儿们使用,具体在此不做赘述,有兴趣的小伙伴儿请移步:
Git传送门:https://github.com/pagekit/vue-resource/blob/master/README.md
具体的使用方式个中均有详述。
最后,就是我自己遇到的一个坑,上代码!(不喜过程的小伙伴儿可以看波代码,然后直接跳到文章尾看结论。)
<script>
export default {
name: 'app',
data () {
return {
articles: [] }
},
created: function() {
this.$http.get('/api/user/order/list',
{
productType:"1",
pageNum:1,
pageLimit:8
},
{
headers:{ },
emulateJSON: true
}
).then((response) => {
this.articles = response.data.data.list;
}).catch(function(response) {
console.log(response)
});
}
}
</script>
这个是最初始的代码,满心欢喜打包运行之后,发现控制台报了个错,说list未定义!WTF!为此我去后台看了下接口调用的情况,发现之前在调用接口时所传的参数并没有传参成功,后来去网上多方搜查资料,发现把传参方式修改成如下形式即可:
{
params: {
productType:"1",
pageNum:1,
pageLimit:8
}
}和之前的传参方式不同,这次我把参数加在了一个名为params的对象中,再次打包后上传,发现接口调用成功!
在这里,我对params做一个解释,params表示的是支持上传多个可变参数,至于为啥加了之后就可以了,我也不是非常清楚,如有大神看到,望不吝赐教OTZ。
OK,既然接口调用成功了,那么数据也应该就如愿以偿的可以获取到了,然而看到页面上仍是一片空白,懵逼的我瞄了一眼控制台,发现此时控制台上报了个错,说list未定义。WTF!为此我仔细的看了下接口的数据结构,发现这样赋值并没有问题,可就是报错未定义。于是便有了如下猜想:










